用戶滾動時，jQuery窗口滾動停止觸發

Question

當用戶向下滾動一定數量的像素時，我修復了標題。 但是，有沒有辦法在用戶滿足邏輯要求后停止調用窗口滾動功能？ 我認為這不利於性能。 查看控制台的屏幕截圖（ http://d.pr/i/OHDX ）

$window.scroll(function() {
    if ($window.scrollTop() > 100) {
        $('.header').addClass('fixed');
        console.log('fix header'); 
    }
    else {
        $('.header').removeClass('fixed');
        console.log('unfix header'); 
    }

}

Answer 1

您必須繼續檢查滾動位置。 我假設您想在用戶回滾到100時解開它嗎？

您當前的實現很好，從性能角度考慮。 您可以添加的一件事是檢查該類是否尚未添加，或者保持切換狀態，以便知道該類是否存在（而不是檢查）。

$window.scroll((function() {
    var fixed = false, elem;
    return function () {
        var should_fix = $window.scrollTop() > 100;
        elem = elem || $('.header');
        if (should_fix !== fixed) {
            if (should_fix) {
                elem.addClass('fixed');
                console.log('fix header'); 
            } else {
                elem.removeClass('fixed');
                console.log('unfix header'); 
            }
            fixed = should_fix;
        }
    };
}()) // immediate invocation, because it's awesome