javascript - 使用 jQuery 检测元素何时靠近页面底部

Question

我有一个脚本可以计算出元素列表与页面顶部的距离，但我不确定如何检测它与底部的距离。当它到达底部时（好吧，在底部之前 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)
        }
    })
})

如果有人有任何建议，不胜感激。我正在循环遍历元素以检测它，所以当其中一个从底部达到 20px 时，我想将其淡出。谢谢！

Answer 1

您可以在计算中使用 jQuery 函数height()，例如：

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

具体来说，如果要检测元素的顶部是否靠近页面底部，可以使用以下计算：

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

Answer 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