Get a Quote

Header Scrolling Javascript Function

Updated November 21, 2023

~ minute read

Share this Post :

Get the most out of your marketing

Join over 100,000 of the most intelligent marketers in the universe, and receive marketing news and insights straight to your inbox.

Enter Email to Get Started:

(We will never share your information.)

Header Scrolling Javascript Function

Javascript Function

jQuery(document).ready(function($){ var scroll_pos = 0; scroll_pos = $(this).scrollTop(); if(scroll_pos > 2) { $("#top-nav").css('background-color', '#ffffffff'); $("#top-nav ul li a").addClass('top-nav-links'); } else { $("#top-nav").css('background-color', '#ffffff00'); $("#top-nav ul li a").removeClass('top-nav-links'); } $(document).scroll(function() { scroll_pos = $(this).scrollTop(); if(scroll_pos > 2) { $("#top-nav").css('background-color', '#ffffffff'); $("#top-nav ul li a").addClass('top-nav-links'); } else { $("#top-nav").css('background-color', '#ffffff00'); $("#top-nav ul li a").removeClass('top-nav-links'); } });