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?