Develop Reference

fullpage.js: disable page scroll when scrolled with the mouse pointer inside a container

What's happening: Scrolling works no matter which position i have the mouse while i scroll.
What i want to achieve: When the user scrolls with the mouse pointer positioned inside a particular container, I would like to disable the plugin from changing pages. When the user scrolls with the mouse pointer outside that same container, the normal functionality of the plugin should be restored; i.e. the pages should be scrollable again.
What have i tried: I listened for the scroll event on the document and found out whether the mouse is inside the container while executing the scroll and store the possibilities as a boolean.
$(document).bind("mousewheel", function(event) {
// preventScroll = true;
console.log(event);
if($(event.target).closest(".no-scroll").length) {
preventScroll = true;
}
else {
preventScroll = false;
}
});
Then onLeave i try to find out the value of preventScroll and try to stop event propagation (since in want to stop an actual event) by returning false
setTimeout(function() {
console.log(preventScroll);
if(preventScroll) {
console.log("no-scroll")
return false;
}
}, 10);
I an using setTimeout to capture the desired value of preventScroll although I guess the plugin executes a scroll within that 10 ms and that's why return false doesn't seem to have an effect. I can't seem to figure out how else to proceed to achieve the desired functionality.
Codepen: https://codepen.io/binarytrance/pen/YxBqPj
In this implementation, the container i want to disable scroll is in the second page/section. Please be aware of the values spit out in the console.

Use the fullpage.js option normalScrollElements. Check the fullpage.js docs for more info:
normalScrollElements: (default null) If you want to avoid the auto scroll when scrolling over some elements, this is the option you need to use. (useful for maps, scrolling divs etc.) It requires a string with the jQuery selectors for those elements. (For example: normalScrollElements: '#element1, .element2'). This option should not be applied to any section/slide element itself.

Is there a way to know when an element pass over another element?

I have a sticky element which needs to recognize when it passes over another element in order to disappear from the screen.
This is the element that should disappear:
.sticky-footer
.container
.row.sticky-row
.col-xs-6
// text
.col-xs-6
// text
When the user is scrolling down and it passes over this element:
hr#line-before-related-article
Is there a way to do that with css or jQuery?

You can listen on an event that fires every time the page is scrolled and then check if it's location is past your hr#line-before-related-article.
Here's an example:
$(window).on('scroll', function() {
if ($(this).scrollTop() + $(this).height() >= $('#line-before-related-article').position().top) {
$('.sticky-footer').hide();
} else if ($('#line-before-related-article').position().top >= $(this).scrollTop()) {
$('.sticky-footer').show();
}
})
If you want something that's a little more performant, you can use something called a debounce function...
For those of you who don't know what a debounce function does, it limits the rate at which a function can fire. A quick example: you have a resize listener on the window which does some element dimension calculations and (possibly) repositions a few elements. That isn't a heavy task in itself but being repeatedly fired after numerous resizes will really slow your site down. Why not limit the rate at which the function can fire?
More on that here: https://davidwalsh.name/javascript-debounce-function

scrollTop returns 0 for all document elements in javascript but scroll event fires on body tag

I made an event handler for the scroll event on the body tag which fires correctly. However when I try to find the position of the scollbar using scrollTop(), I was unable to do so. To figure out which element was being scrolled I logged the scrollTop() of all the DOM elements but surprisingly all were 0.
$('body').scroll(function () {
var all = document.getElementsByTagName("*");
for (var i=0, max=all.length; i < max; i++) {
console.log('scrolltop', all[i].scrollTop);
}
});
All I want to know is the position of the scrollbar and whether the scrollbar has reached the end or not. I have tried $(document).scroll() and $(window).scroll, but none of them fires. The event only works on the body tag.

Using the window object is usually the most reliable for tracking scrolling.
ScrollTop also only really tracks how much the window has been scrolled and although commonly confused for doing so, it does not track how far an element is from the top of the page. For that you need to use offset.
As such I have simply changed your code to run on the window scroll and also changed your logic to use jQuerys each function which will make things simpler.:
JS:
$(window).scroll(function () {
$('*').each(function (){
console.log(
'Element Text:', $(this).text(),
' | From Top', $(this).offset().top
);
})
});
With the above JS you will see in your console the following output:
Element Text: hello87 | From Top 1556
JsFiddle:
https://jsfiddle.net/wigster/t1e3dee8/1/

What is the correct logic of hiding a DIV the instant its height is below a certain number?

I have a div filled with images.
I have a button that removes images one by one from the div, thus decreasing its height every time.
When the div's height is below 75px in height (implying that it no longer holds any images), I have this jQuery code that is meant to hide the div as soon as the low height is detected:
if ($('#ImageDiv').height() < 75) {
$('#ImageDiv').hide();
}
This code is programmed to activate every time the user clicks that Remove Image button.
Instead, here is what is actually happening: The user clicks the button, thus removing the image, but the div does NOT immediately hide the div despite the height being below 75. Instead, it requires a second click of the button to realize the height is low enough to hide the div.
What is wrong with my logic and how can this problem be fixed?

Without any code that's my better... try to print on console or alert $('#ImageDiv').height() at the end of your function to see what it really sizes.
Are you using an animation to remove the images? If yes, maybe you could check your height value at the complete callback from the animation. Maybe are you evaluating the $('#ImageDiv').height() before the animation has completed?
Hope this helps.
EDITED AFTER COMMENT
With .slideUp() function you can pass a function as second argument (callback). There you can check or do whatever you want:
$('#ImageDiv').slideUp('fast', function() {
// After slideUp is completed, run this...
});
More info here: http://api.jquery.com/slideup/
If you use .remove() function you could check the height with:
$.when($('#your_Removed_DIV_ID').remove()).then(
console.log(
'Height: ' + $('#ImageDiv').height()
)
);

The case might be that you are removing the image from the div after the height check condition. Make sure to do that earlier.
Alternatively, you can simply use if( $('#ImageDiv').has('img').length ) for the presence of img tag inside the div. This would for images less that 75 as well.

This might help you:
$('#remove').on('click', function(){
$('#ImageDiv > img').last().remove(); //remove the last Image
if ($('#ImageDiv > img').length === 0) { //check if there is an image left
$('#ImageDiv').hide();
}
});
Normally I would recommend to cache reused jQuery-Objects, but in this case this would cause an error because an old state is checked.
Side-Note: If this button is within a form-element or a styled anchor-tag you might need to use event.preventDefault() at the beginning of your function.
Demo

You would need to prevent the default activity of button and perform the desired action. http://jsfiddle.net/bcnsk83p/1/
Example:
$("#btn").click(function(e){
e.preventDefault();
$('#ImageDiv img:last-child').remove();
if ($('#ImageDiv').height() < 75) {
$('#ImageDiv').hide();
$('p').text("#ImageDiv is now hidden!");
}
});

Remove and Add scroll event handler using jQuery .off or .unbind

I am writing my own image Lazy Loading function that when a div is scrolled to its bottom we load some new images, the height of the container div (#ScrollDiv in this case) is increased and when we scroll to the bottom again we make the same call. This is fine although I pass a 'pagination ID' with each request for more images (this is called appName.featureName.PaginationConstant and in a parent scope) and I want to remove or freeze the scroll event so we don't make other requests or increment the pagination ID. For example:
appName.featureName.lazyLoader = function() {
var currentScroll = $(this).scrollTop(),
divHeight = $(this)[0].scrollHeight,
actualHeight = $(this).height() + parseInt($(this).css('padding-bottom'))
// have we hit the bottom of the Scroll Div?
if((divHeight - actualHeight) <= currentScroll ) {
// yes we have, remove the scroll, see I name this function below
$('#ScrollDiv').off('scroll', appName.featureName.lazyLoader);
// Now get more photos, in the function below I shall re-bind the scroll functionality
appName.featureName.getMorePhotos(++appName.featureName.PaginationConstant);
}
};
// this is the lazyload funtion
appName.featureName.lazyLoad = function () {
$('#ScrollDiv').on('scroll', appName.featureName.lazyLoader);
};
Everything works great apart from the unbinding! I am still able to fire the scroll event handler despite the fact I have tried to remove it once my condition is met with $('#ScrollDiv').off('scroll', appName.featureName.lazyLoader);
What am I doing wrong?

Have you ever tried like this?
$('#ScrollDiv').on('scroll','#ScrollDiv', appName.featureName.lazyLoader);
and
$('#ScrollDiv').off('scroll','#ScrollDiv', appName.featureName.lazyLoader);
or you can use the method bind too
$('#ScrollDiv').bind('scroll', appName.featureName.lazyLoader);
and
$('#ScrollDiv').unbind('scroll', appName.featureName.lazyLoader);

jQuery's .off() function doesn't work that way. If you wanna add and remove only your own scroll handler and leave other 3rd party scroll handlers alone, you want to use
$("#scrollDiv").on("scroll.appName", appName.featureName.lazyLoader);
and to remove all of your own handlers:
$("#scrollDiv").off(".appName");
or, to only remove your own scroll handler, but leave a click handler alone:
$("#scrollDiv").off("scroll.appName");
See the documentation at http://api.jquery.com/off/ for more information.