change header background color on scroll css 1

change header background color on scroll css

/* 
    .active { background-color: #fff}
*/
$(function() {
    $(window).on("scroll", function() {
        if($(window).scrollTop() > 50) {
            $(".header").addClass("active");
        } else {
           $(".header").removeClass("active");
        }
    });
});

Here is what the above code is Doing:
1. We’re using the jQuery library to select the window object.
2. We’re using the on() method to attach an event handler to the window object.
3. We’re using the scroll() method to attach a scroll event handler to the window object.
4. We’re using the scrollTop() method to get the vertical scrollbar position.
5. We’re using the if statement to check if the vertical scrollbar position is greater than 50.
6. We’re using the addClass() method to add the active class to the header element.
7. We’re using the removeClass() method to remove the active class from the header element.

Similar Posts