根据滚动位置更改CSS - 重构错误的代码

Question

我编写了一个jQuery函数,根据其参考部分是否可在窗口中查看,更改导航菜单项的css值.

$(window).scroll(function() {

    var scroll = $(window).scrollTop();

    if (scroll <= 590) {
        $("#menu-item-25 a").addClass('blue');
        $("#menu-item-26 a").removeClass('blue');
        $("#menu-item-22 a").removeClass('blue');
        $("#menu-item-23 a").removeClass('blue');
        $("#menu-item-24 a").removeClass('blue');
    }
    else if (scroll >= 591 && scroll <= 1380) {
        $("#menu-item-26 a").addClass('blue');
        $("#menu-item-25 a").removeClass('blue');
        $("#menu-item-22 a").removeClass('blue');
        $("#menu-item-23 a").removeClass('blue');
        $("#menu-item-24 a").removeClass('blue');
    }
    else if (scroll >= 1381 && scroll <= 2545) {
        $("#menu-item-22 a").addClass('blue');
        $("#menu-item-25 a").removeClass('blue');
        $("#menu-item-26 a").removeClass('blue');
        $("#menu-item-23 a").removeClass('blue');
        $("#menu-item-24 a").removeClass('blue');
    }
    else if (scroll >= 2546 && scroll <= 2969) {
        $("#menu-item-23 a").addClass('blue');
        $("#menu-item-25 a").removeClass('blue');
        $("#menu-item-26 a").removeClass('blue');
        $("#menu-item-22 a").removeClass('blue');
        $("#menu-item-24 a").removeClass('blue');
    }
    else if (scroll >= 2970) {
        $("#menu-item-24 a").addClass('blue');
        $("#menu-item-25 a").removeClass('blue');
        $("#menu-item-26 a").removeClass('blue');
        $("#menu-item-22 a").removeClass('blue');
        $("#menu-item-23 a").removeClass('blue');
    }
});

它看起来非常难看.有没有更好的方法来实现这一目标？

Answer 1

之前的所有答案都可以正常工作,因为你有多种方法可以让你更好地对CSS选择器进行一些更改,但如果你要在滚动事件中做所有这些计算,你应该阅读这篇John Resign Post关于如何处理滚动事件,特别是这部分:

将处理程序附加到窗口滚动事件是一个非常非常糟糕的主意.根据浏览器的不同,滚动事件可以激活很多,将代码放入滚动回调会减慢任何滚动页面的尝试(不是一个好主意).因此,滚动处理程序中的任何性能下降只会影响整体滚动的性能.相反,最好使用某种形式的计时器来检查每X毫秒或附加滚动事件,并且只在延迟后运行代码(或者甚至在给定次数的执行之后 - 然后延迟).
- John Resign

所以,在你的情况下,我会这样:

HTML:

<div class="menu">
    <a id="menu-item-22">Link 1</a>
    <a id="menu-item-23">Link 2</a>
    <a id="menu-item-24">Link 3</a>
    <a id="menu-item-25">Link 4</a>
    <a id="menu-item-26">Link 5</a>
</div>

jQuery的:

var didScroll = false;

$(window).scroll(function() {
    didScroll = true;
});

setInterval(function() {
    if ( didScroll ) {
        didScroll = false;
        var $el;

        //Same that all the if else statements
        switch (true) {
            case (scroll >= 591 && scroll <= 1380):
                $el = $("#menu-item-26 a");
                break;
            case (scroll >= 1381 && scroll <= 2545):
                $el = $("#menu-item-22 a");
                break;
            case (scroll >= 2546 && scroll <= 2969):
                $el = $("#menu-item-23 a");
                break;
            case (scroll >= 2970):
                $el = $("#menu-item-24 a");
                break;
            default: //scroll<=590
                $el = $("#menu-item-25 a");
        }

        //Removing blue class from all links
        $('.menu a').removeClass('blue');

        //Adding blue class to the matched element
        $el.addClass('blue');
    }
}, 50);