How to change Header Background color on Scroll (jQuery)


How to change Header Background color on Scroll (jQuery).Changing background colour on scroll using jQuery. How to Change Navbar Text Color on Scroll.Change header background color on scroll css.Header change color on scroll.Background change on scroll

In this tutorial, we are going to create a simple navbar and change its background & text color on the scroll. 


How to Change Navbar Text Color on Scroll

First, we need a navbar in order to change the navbar background color. If you already have a navbar, you just need to find the class name or id that we’ll use in jQuery function to change the navbar background color.

jQuery Function.

<script type="text/javascript">

//<![CDATA[

$(window).on("scroll", function(){ if($(window).scrollTop() > 50){ $(".header").addClass("active"); } else { $(".header").removeClass("active"); } });

//]]>

</script>


The CSS Styles for Navbar

In CSS,  set some style for the navbar.

<style>

.header.active { background: #033958;  }

</style>


Watch Tutorial


That’s all!. If you have any questions or suggestions let me know by comment below.