导航链接在滚动位置上更改（单页站点）

Question

我是jQuery和javascript的新手。 我正在尝试创建一个单页网站。 导航固定在顶部。 在单个页面的新“部分”时，我希望导航显示该部分，并在导航中突出显示当前正在显示的部分。

我设法用scroll（）做到​​了这一点，但是只有在变量'top'大于0时它才起作用。我知道这可能是很愚蠢的，我做错了，但是我对此很陌生，所以我希望不会打扰你。

http://jsfiddle.net/mAPh6/

$(document).scroll( function() {
    var top = $(document).scrollTop();

    if ( 200 > top > 0 )
        $(".navLinkTop").css("border-bottom", "5px solid #fff568");
    else
        $(".navLinkTop").css("border-bottom", "none");

    if ( 400 > top > 200 )
        $(".navLinkAbout").css("border-bottom", "5px solid #fff568");
    else
        $(".navLinkAbout").css("border-bottom", "none");

    if ( 400 > top > 0 )
        $(".navLinkWork").css("border-bottom", "5px solid #fff568");
    else
        $(".navLinkWork").css("border-bottom", "none");

    if ( 400 > top > 0 )
        $(".navLinkContact").css("border-bottom", "5px solid #fff568");
    else
        $(".navLinkContact").css("border-bottom", "none");
});

Answer 1

当您执行类似a > b > c它不会读出为“ a大于b 而 b大于c”。 相反，会发生以下情况：

1. a > b > c计算为
2. (true) > c （假设a确实大于b），其结果为
3. Number(true) > c因为存在类型转换，其结果为
4. 1 > c这是相当随机的

因此， 3 > 2 > 0为真，但3 > 2 > 1为假。 通常，您在执行AND时只需要使用&& 。

这是因为>运算符是二进制的，即它带有两个参数。

您需要做的是(a > b) && (b > c) ， &&表示“和”

在您的情况下，这意味着将诸如200 > top > 0语句更改为(top < 200) && (top > 0)