Use jQuery to detect when an element is near the bottom of the page

Question

I've got a script that works out the distance of a list of elements from the top of the page, but I am unsure how to detect it's distance from the bottom. When it hits the bottom (well, 20px before the bottom) I want to fire an event and fade it out:

$(window).on('load resize scroll', function () {
    $('.links__item').each(function () {
        if (($(this).offset().top - $(window).scrollTop()) < 20) {
            $(this).stop().fadeTo(100, 0)
        } else {
            $(this).stop().fadeTo('fast', 1)
        }
    })
})

If anyone has any advice, much appreciated. I'm looping through the elements to detect it, so when one of them hits 20px from the bottom, I want to fade it out. Thanks!

This might help : http://stackoverflow.com/a/3898152/1823841 — palaѕн, May 15 '13 at 16:14

score 15 · Accepted Answer · edited Mar 03 '17 at 10:43

15

You can use the jQuery function height() at your calculations, like:

$(window).height();
$(this).height();

Specifically, if you want to detect if the top of the element is near to the bottom of the page, you can use this calc:

if ( $(this).offset().top > ($(window).scrollTop() + $(window).height() - 20) ) // True

edited Mar 03 '17 at 10:43

Hastig Zusammenstellen

4,286
3
32
45

answered May 15 '13 at 16:23

Bruno Croys Felthes

1,183
8
27

score 4 · Answer 2 · answered May 15 '13 at 16:26

Halcyon,

I am not sure what you want to fire but you can test the bottom of the page like this

$(window).on('load resize scroll', function () {
    $('.links__item').each(function () {
        if( ($(this).offset().top > ($(window).scrollTop() + $(window).height() - 20)) {
            $(this).stop().fadeTo(100, 0)
        } else {
            $(this).stop().fadeTo('fast', 1)
        }
    })
})

Reason being is jQuery finds bottom of the page based upon its height

1 $(window).height();   // returns height of browser viewport
2 $(document).height(); // returns height of HTML document

Bruno got there just quicker with the identical answer, but thank you very much anyway :)! — Stephen Jenkins, May 15 '13 at 16:29

Use jQuery to detect when an element is near the bottom of the page

2 Answers2