导航链接在滚动位置上更改(单页网站)

时间:2013-03-09 14:30:38

标签: javascript jquery

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

我设法用滚动()做了一些但是它只有在变量'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");
});

1 个答案:

答案 0 :(得分:2)

当您执行a > b > c之类的操作时,它不会读作“a大于b b大于c”。相反,会发生以下情况:

  1. a > b > c评估为
  2. (true) > c(假设a确实大于b)评估为
  3. Number(true) > c因为存在类型转换,其结果为
  4. 1 > c这是非常随意的
  5. 因此,3 > 2 > 0为真,但3 > 2 > 1为假。通常,您只需在执行 AND 时使用&&

    这是因为>运算符是二进制的,它需要两个参数。

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

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