jquery - jquery 实时滚动检测

Question

我将如何设置多个滚动值？例如，我希望“sub-nav-controls”在与“wrap-nav-slider”不同的位置切换。但是，它们目前都在 96 岁时切换。我尝试将它们分解，但它破坏了脚本。

var fixed = false;
$(document).live("scroll", function(e) {
    if ($(this).scrollTop() > 96) {
        if (!fixed) {
            fixed = true;
            $('.setup-page .wrap-nav-slider').addClass('nav-slider-fixed');
            $('.setup-page .sub-nav-controls').addClass('sub-nav-controls-fixed');

        }
    } else {
        if (fixed) {
            fixed = false;
            $('.setup-page .wrap-nav-slider').removeClass('nav-slider-fixed');
            $('.setup-page .sub-nav-controls').removeClass('sub-nav-controls-fixed');
        }
    }
});

Answer 1

将它们拆分为两个单独的 if 语句，并使用.hasClass而不是布尔变量。

$(document).live("scroll", function (e) {
    if ($(this).scrollTop() > 96) {
        $('.setup-page .wrap-nav-slider').addClass('nav-slider-fixed');
    } else {
        $('.setup-page .wrap-nav-slider').removeClass('nav-slider-fixed');
    }

    if ($(this).scrollTop() > 202) {
        $('.setup-page .sub-nav-controls').addClass('sub-nav-controls-fixed');
    } else {
        $('.setup-page .sub-nav-controls').removeClass('sub-nav-controls-fixed');
    }
});

_{免责声明：有更好的方法可以做到这一点}