Genesis Smart Header – Hide on Scroll but Show on Scroll Up

Procedure to implement smart sticky header in WordPress Genesis

Sticky header is a great way to let visitors navigate through your site when on mid of the page or post. It helps the readers to go to the header menu for further browsing.

But there is one problem.

Sticky header always shows on screen when you scroll down. Which is ok but if browsing on a small device then it would be disturbing the readability.

So what’s the solution?

A smart header – hide when you scroll down but show immediately when trying to scroll up. Sounds cool?

I’ve tested this in the Authority Pro theme. Take a backup of an existing file so you can restore it if something goes wrong.

Add the following in functions.php file

//* Smart Header Functions
add_action('wp_footer','geekflare_header_sticky_script');
function geekflare_header_sticky_script()
{
?>
	<script>	
		// Hide Header on Scroll Down but Show when Scroll Up
		var didScroll;
		var lastScrollTop = 0;
		var delta = 5;
		var navbarHeight = '';

		jQuery(window).load( function() {
			navbarHeight = jQuery('header.site-header').outerHeight();
			jQuery('body').css('paddingTop',navbarHeight);
		});

		jQuery(window).scroll(function(event){
			didScroll = true;
		});

		setInterval(function() {
			if (didScroll) {
				geekflare_hasScrolled();
				didScroll = false;
			}
		}, 250);

		function geekflare_hasScrolled() 
		{
			var st = jQuery(this).scrollTop();
			
			// Make sure to scroll more than delta
			if(Math.abs(lastScrollTop - st) <= delta)
				return;
			
			// If scrolled down and are past the navbar
			// This is necessary so you never see what is "behind" the navbar.
			if (st > lastScrollTop && st > navbarHeight){
				// Scroll Down
				jQuery('header.site-header').css('top',-navbarHeight).removeClass('shadow');
			} else {
				// Scroll Up
				if(st + jQuery(window).height() < jQuery(document).height()) {
					jQuery('header.site-header').css('top',0).addClass('shadow');
				}
			}
			
			if (st < 15){
				jQuery('header.site-header').css('top',0).removeClass('shadow');
			}
			
			lastScrollTop = st;
		}
	</script>	
<?php
}

And, the below in style.css file

/* Smart Header */

header.site-header {
        position: fixed;
        top: 0;
        transition: top 0.3s ease-in-out;
        width: 100%;
        z-index: 9;
        left: 0;
        right: 0;
}

header.site-header.shadow {
        -webkit-box-shadow: 0 0 50px rgba(0,0,0,.15);
        box-shadow: 0 0 50px rgba(0,0,0,.15);
}

body.admin-bar header.site-header{
        top: 32px;
}

@media only screen and (max-width: 780px) 
{
        body.admin-bar header.site-header{
                top: 46px;
        }

}

Refresh the page to see the result. Don’t forget to clear the cache if any.

Do you like this little optimization?