jQuery滾動功能排除可變高度

Question

我有一個響應站點，因此頁腳高度可變。

在頁面底部觸發滾動功能以擴展內容（無限滾動），但這需要在底部減去頁腳高度。

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

這段代碼適用於底部，我在這里找到的解決方案的問題是兩次if語句為true，因為運算符是：大於或等於（> =）而不是（==）。 因此它被觸發了兩次，並且超時將無法解決。

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