I can't make scroll function work properly

Question

I want to give some css properties to some classes as I scroll down. I have a code shown below. The problem is, the first and last 'if's work (the .second-nav slides down and up clearly) but the .css codes doesn't work. the classes don't get the css I've written in. How should I maintain that code?

$(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

For any scrollPos over 200 your first condition will fire, and therefore none of the tests for higher numbers will ever fire.

You need to change the order, putting the test for the highest number first:

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

Each "else if" is over-riding the statement within the previous "if". You would need to do something like:

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