网页滚动多区间切换图片遇IF条件逻辑问题求助（附jQuery代码）

嘿，我一眼就发现你代码里的核心问题啦——你的if条件逻辑写错了！一个滚动距离不可能同时落在1200-1900和2500-3500这两个完全不重叠的区间里，所以用&&连接这两个条件会让判断永远不成立，自然触发不了类的添加操作。

咱们把逻辑修正过来就行，只要把条件里的&&换成||（表示“满足任意一个区间即可”），就能实现你想要的效果：

var $logo = $("h6.navbar-brand-spacing > a");
$(window).scroll(function () {
    var e = $(this).scrollTop();
    // 用||代替&&，满足两个区间中的任意一个就添加类
    if ((e > 1200 && e < 1900) || (e > 2500 && e < 3500)) {
        $logo.addClass('navbar-brand-scroll');
    } else {
        $logo.removeClass('navbar-brand-scroll');
    }
});

如果想要逻辑更直观，也可以把条件拆成两个独立判断，效果是完全一致的：

var $logo = $("h6.navbar-brand-spacing > a");
$(window).scroll(function () {
    var e = $(this).scrollTop();
    // 判断是否处于第一个目标区间
    var inFirstRange = e > 1200 && e < 1900;
    // 判断是否处于第二个目标区间
    var inSecondRange = e > 2500 && e < 3500;
    
    if (inFirstRange || inSecondRange) {
        $logo.addClass('navbar-brand-scroll');
    } else {
        $logo.removeClass('navbar-brand-scroll');
    }
});

这样修改后，当页面滚动到1200-1900或者2500-3500的区间时，就会给目标元素添加navbar-brand-scroll类；滚动到其他位置时，类会被移除，完全符合你的需求~

内容的提问来源于stack exchange，提问作者Marco Jaimes