Add CSS Class To Nav When User Scrolls

When user is at the top of the page, the Site Header is transparent. When the user scrolls down, the Site Header has the class of 'dark' added, and can be styled with a dark background.

This is from the StudioPress Altitude Pro theme. When user is at the top of the page, the site-header is transparent. When the user scrolls the page, the ‘dark’ class is added to the site-header div, allowing you to style the .site-header.dark element as you see fit.

jQuery(function( $ ){
	if( $( document ).scrollTop() > 0 ){
		$( '.site-header' ).addClass( 'dark' );			
	}
	// Add opacity class to site header
	$( document ).on('scroll', function(){
		if ( $( document ).scrollTop() > 0 ){
			$( '.site-header' ).addClass( 'dark' );			
		} else {
			$( '.site-header' ).removeClass( 'dark' );			
		}
	});
});

Hire WordPress Experts at Codeable.

The only WordPress exclusive freelancer platform that connects thousands of customers with the top WordPress freelance experts to work on projects of any size. 

Free estimate • No obligation to hire • 100% risk-free