Question

当我向下滚动时，我想给某些类提供一些css属性。我有一个如下所示的代码。问题是，第一个和最后一个如果工作（.second-nav向下和向上滑动），但.css代码不起作用。这些课程没有得到我写的CSS。我该如何维护这段代码？

$(window).scroll(function() {

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

    if (scrollPos>200){
        $( ".second-nav" ).slideDown();
    }
    /* not-working area starts here*/
    else if (scrollPos>690){
        $('.who-btn').css("border-bottom", "5px solid #25bdad");
    }
    else if (scrollPos>1415){
        $('.difference-btn').css("border-bottom", "5px solid #25bdad");
    }
    else if (scrollPos>1995){
        $('.brands-btn').css("border-bottom", "5px solid #25bdad");
    }
    else if (scrollPos>3604){
        $('.contact-btn').css("border-bottom", "5px solid #25bdad");
    }
    /* lol this works */
    else if (scrollPos < 199){
        $( ".second-nav" ).slideUp();
    } 
});

Answer 1

每个“else if”都覆盖了之前“if”中的语句。您需要执行以下操作：

if (scrollPos <= 200)
{
    $( ".second-nav" ).slideUp();
}
else if (scrollPos >= 690 && scrollPos <= 1414){
    $('.who-btn').css("border-bottom", "5px solid #25bdad");
}

Answer 2

对于超过200的任何scrollPos，您的第一个条件将被触发，因此没有任何更高数字的测试会被触发。

您需要更改顺序，首先将测试放入最高编号：

if (scrollPos>3604){
    $('.contact-btn').css("border-bottom", "5px solid #25bdad");
}
else if (scrollPos>1995){
    $('.brands-btn').css("border-bottom", "5px solid #25bdad");
}
else if (scrollPos>1415){
    $('.difference-btn').css("border-bottom", "5px solid #25bdad");
}
else if (scrollPos>690){
    $('.who-btn').css("border-bottom", "5px solid #25bdad");
}
else if (scrollPos>200){
    $( ".second-nav" ).slideDown();
}
else {
    $( ".second-nav" ).slideUp();
}

我无法使滚动功能正常工作

2 个答案: