使用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

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

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

具体来说,如果要检测元素的顶部是否接近页面底部,则可以使用此计算:

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