Trying to exclude footer height from window scroll jQuery

Question

I am trying to work with this infinite scroll. This is the JS link

I need to exclude the footer height which is about 150px in height.

Original jQuery from tutorial:

$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() == $(document).height()){

So I changed the jQuery code like this.

$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() > $('#bottom').offset().top)){

One more try with:

$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() -150 == $(document).height()){

so both didn't work, infinite scroll only works when I touch the scroll to the end of the browser, then it works.

Hence, I am looking for where I can exclude the footer height, so that user when they touch the footer with scroll, the infinite scroll should work.

Answer 1

I think you got it right at your second attempt. Have you tried clearing your browser cache, perhaps test in a different browser? I basically did the same, and it works for me. Using console.log() can be very useful when trying to figure out these kinds of things.

Do you have a link to the website? Perhaps something else is causing the issue...

$(window).scroll(function() {
    scrollDistance = $(window).scrollTop() + $(window).height();
    footerDistance = $('#bottom').offset().top;

    if (scrollDistance >= footerDistance) {
        console.log("Infinite scroll time!");
    }
})

fiddle: https://jsfiddle.net/9ehnb8dv/2/