In WordPress Last updated:
Share on:
Cloudways offers managed cloud hosting for any size business to host a website or complex web applications.

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?

Share on:
  • Chandan Kumar
    Author
    Chandan Kumar is a seasoned technology enthusiast and entrepreneur passionate about empowering businesses and individuals globally. As the founder of Geekflare, a leading technology publication, Chandan has spearheaded the development…

Thanks to our Sponsors

More great readings on WordPress

Creating Architecture Runway for the SAFe Portfolio
Creating Architecture Runway for the SAFe Portfolio

Have you ever wondered how it is possible that every time your product owner brings in some new feature topic, the team response is they need to investigate technical possibilities and create some form of design before they can be sure how to develop that feature? Then that’s most likely because you have no Architecture Runway in place.

Power Your Business

Some of the tools and services to help your business grow.
  • The text-to-speech tool that uses AI to generate realistic human-like voices.

    Try Murf AI
  • Web scraping, residential proxy, proxy manager, web unlocker, search engine crawler, and all you need to collect web data.

    Try Brightdata
  • Monday.com is an all-in-one work OS to help you manage projects, tasks, work, sales, CRM, operations, workflows, and more.

    Try Monday
  • Intruder is an online vulnerability scanner that finds cyber security weaknesses in your infrastructure, to avoid costly data breaches.

    Try Intruder