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.

Morten · Accepted Answer · 2015-11-21T13:24:59.420

3

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/

edited Nov 21 '15 at 13:24

answered Nov 21 '15 at 13:10

Morten

487
2
13

am still working on my localhost. let me try out with your code and update you, thanks for helping. – yuri1000 Nov 21 '15 at 13:20
1

No problem. Like I said, I actually think you got it right in one of your attempts. – Morten Nov 21 '15 at 13:27

Trying to exclude footer height from window scroll jQuery

1 Answers1