CODEWITHSUNDEEP
javascriptjquerycss
JustALittleBit
JustALittleBit

Reputation: 53

Change css by scrolling down and up

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.

Upvotes: 3

Views: 11103

Answers (1)

Noel Schenk
Noel Schenk

Reputation: 726

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

       }
});

Upvotes: 4

Related Questions