Используйте jQuery для обнаружения, когда элемент находится в нижней части страницы

У меня есть script, который отображает расстояние от списка элементов вверху страницы, но я не уверен, как определить его расстояние до дна. Когда он попадает в нижнюю часть (ну, 20px перед дном), я хочу запустить событие и угаснуть его:

$(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)
        }
    })
})

Если у кого-то есть какие-то советы, очень ценится. Я просматриваю элементы, чтобы обнаружить их, поэтому, когда один из них ударяет снизу на 20 пикселей, я хочу, чтобы он исчез. Спасибо!

Ответ 1

Вы можете использовать функцию jQuery height() в своих вычислениях, например:

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

В частности, если вы хотите определить, находится ли верхняя часть элемента рядом с нижней частью страницы, вы можете использовать этот calc:

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

Ответ 2

Халкион,

Я не уверен, что вы хотите запустить, но вы можете проверить нижнюю часть страницы, как это

$(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)
        }
    })
})

Причина: jQuery находит нижнюю часть страницы в зависимости от ее высоты

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