Question

我有一个响应式网站，因此页脚高度可变。

滚动功能在页面底部触发以扩展内容（无限滚动），但这需要在底部减去页脚高度。

$(window).scroll(function() {
    if ( $(window).scrollTop() == $(document).height() - $(window).height() ) {
        alert('fire!');
    }
});

这个代码适用于底层，我在这里找到的解决方案的问题是if语句是真的两次因为运算符是：高于或等于（＆gt; =）而不是（==）。因此它会被触发两次并且超时后这将无法解决。

$(window).scroll(function() {
    scrollDistance = $(window).scrollTop() + $(window).height();
    footerDistance = $('footer').offset().top;

    if (scrollDistance >= footerDistance) {
        alert('fire!');
    }
})

这是我在这里找到的解决方案，但不是很好，它正在做双重警报。

我也试过下面的代码：

$(window).scrollTop() == $(document).height() - $(window).height() - $('footer').height();
$(window).scrollTop() == ($(document).height() - $('footer').height()) - $(window).height();

Answer 1

添加了一个标志hasEventBeenFired，并在触发事件后将其设置为true。要再次触发它，您需要在某些事件上再次将值设为false。

var hasEventBeenFired = false;
$(window).scroll(function() {
    scrollDistance = $(window).scrollTop() + $(window).height();
    footerDistance = $('footer').offset().top;

    if (scrollDistance >= footerDistance && !(hasEventBeenFired)) {
    hasEventBeenFired = true;
        alert('fire!');
    }
})

Jquery滚动函数排除可变高度

1 个答案: