Question

$(window).scroll(function(e){
    if($(this).scrollTop()>=400)    $('#jtop').show('slow');
    if($(this).scrollTop()<400) if($('#jtop').width()) $('#jtop').hide('slow');
});

I’m using the function to determine if someone scrolls down over 400 an toggling an image and it’s working fine but when I try to get notified if someone reaches my footer’s top position it doesn’t return the expected value. I used offset().top but it alerts me when I scroll down to bottom 0. I just want to know when user is entering and leaving my footer. Hope someone will help me. Thanks in advance.
If you want to see it in action then here is the link heera.it

Non working code

    var ftop=$('#footer').offset().top;
    $(window).scroll(function(e){
        if($(this).scrollTop()>=400)
        {
            $('#jtop').show('slow');
        }
        if($(this).scrollTop()<400)
        {
            if($('#jtop').width()) $('#jtop').hide('slow');
        }
        if($(this).scrollTop()>=ftop)   console.log('true');
        if($(this).scrollTop()<ftop)    console.log('false');
    });

Answer 1

This is just a guess, but your footer’s top position is probably being calculated correctly already, so when calculating whether or not the footer has been reached would involve calculating whether or not the scroll height and the viewport height together reach the footer’s top position.

That make sense? If the footer’s top position is say 1000px away, the scroll height of the window together with the height of the viewport will tell if we’ve reached the footer. I’ve made the mistake of trying to equate just the scroll height value, which would only show if the footer had reached the top of the screen completely.

So to some code:

var footer_top = $("#footer").position().top;

$(window).scroll(function(e) {

    var scroll_top = $(this).scrollTop();
    var viewport_height = $(this).height();

    if (scroll_top + viewport_height >= footer_top) {
        alert("Footer reached!");
    }

});

Hope this helps and makes sense!