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

Process to implement good sticky header in WordPress Genesis

A sticky header is a good way to assist guests navigate your website after they’re in the course of the web page or in a put up. It helps the readers to go to the header menu to proceed looking.

However there’s a drawback.

The sticky header at all times seems on the display once you scroll down. That is advantageous, however looking on a small machine would intervene with readability.

So what is the answer?

A wise head – conceal once you scroll down, however present instantly once you attempt to scroll up. Sounds good?

I examined this within the Authority Professional theme. Again up an present file so you possibly can restore it if one thing goes unsuitable.

Add the next capabilities.php file

//* Good Header Features
add_action('wp_footer','geekflare_header_sticky_script');
operate geekflare_header_sticky_script()
{
?>
	<script>	
		// Cover Header on Scroll Down however Present when Scroll Up
		var didScroll;
		var lastScrollTop = 0;
		var delta = 5;
		var navbarHeight="";

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

		jQuery(window).scroll(operate(occasion){
			didScroll = true;
		});

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

		operate geekflare_hasScrolled() 
		{
			var st = jQuery(this).scrollTop();
			
			// Ensure that to scroll greater than delta
			if(Math.abs(lastScrollTop - st) <= delta)
				return;
			
			// If scrolled down and are previous the navbar
			// That is vital so that you by no means see what's "behind" the navbar.
			if (st > lastScrollTop && st > navbarHeight){
				// Scroll Down
				jQuery('header.site-header').css('prime',-navbarHeight).removeClass('shadow');
			} else {
				// Scroll Up
				if(st + jQuery(window).top() < jQuery(doc).top()) {
					jQuery('header.site-header').css('prime',0).addClass('shadow');
				}
			}
			
			if (st < 15){
				jQuery('header.site-header').css('prime',0).removeClass('shadow');
			}
			
			lastScrollTop = st;
		}
	</script>	
<?php
}

And the beneath within the fashion.css file

/* Good Header */

header.site-header {
        place: mounted;
        prime: 0;
        transition: prime 0.3s ease-in-out;
        width: 100%;
        z-index: 9;
        left: 0;
        proper: 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);
}

physique.admin-bar header.site-header{
        prime: 32px;
}

@media solely display and (max-width: 780px) 
{
        physique.admin-bar header.site-header{
                prime: 46px;
        }

}

Refresh the web page to see the outcome. Remember to clear the cache, if any.

Do you want this little optimization?