스크롤 기능이 제대로 작동하지 않습니다.

Question

아래로 스크롤하면 일부 클래스에 일부 CSS 속성을 제공하고 싶습니다. 아래에 코드가 있습니다. 문제는 첫 번째이자 마지막 'if'작업 (.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

및 : 당신이 뭔가를 할 필요가 없을 것입니다.

는 먼저 가장 높은 번호의 테스트를 두는 순서를 변경해야합니다

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(); 
} 

Answer 2

"else if"는 이전 "if"내의 명령문을 오버라이드합니다. 따라서 높은 숫자 것이다 이제까지 화재에 대한 테스트를 하나도 실행됩니다 어떤 scrollPos 200 첫 번째 조건

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