導航鏈接在滾動位置上更改（單頁站點）

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)