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>
That’s all!. If you have any questions or suggestions let me know by comment below.