通过向下和向上滚动来更改 css

Question

I have some code:

$(document).scroll(function() {
           if($(window).scrollTop() > 50){

            $("#headerline").css("background","red");
            $("#header").hide();
            $("#header2").show();

           }else if($(window).scrollTop() < 50){

            $("#headerline").css("background","blue");
            $("#header2").hide();
            $("#header").show();

           }
    });

Nut when ever I scroll down it moves me back to the top.... I just want to change header css after the page is scrolled down by 100px and when it comes up to change again to main one.

Answer 1

it is working for me ... https://jsfiddle.net/vjc3t1d2/

 $(document).scroll(function() {
       if($(window).scrollTop() > 50){

        $("#headerline").css("background","red");
        $("#header").hide();
        $("#header2").show();

       }else if($(window).scrollTop() < 50){

        $("#headerline").css("background","blue");
        $("#header2").hide();
        $("#header").show();

       }
});