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 a WordPress Expert

Get hourly and project based theme customization, theme tweaks, and development help from world-class WordPress developers at Codeable. If you’re in Kelowna and need a custom website for your business visit our Kelowna Web Design page now to get started.