Genesis智能标题–在滚动条上隐藏但在滚动条上显示

在WordPressGenesis中实现智能粘贴标头的过程

粘性标头是让访问者在页面或帖子中部浏览你的网站的好方法。它可以帮助读者转到标题菜单进行进一步浏览。但是有一个问题。

向下滚动时, 粘性标题始终显示在屏幕上。没关系, 但是如果在小型设备上浏览, 那会打扰可读性。

那有什么解决方案？

智能标题–向下滚动时隐藏, 但在向上滚动时立即显示。听起来不错？

我已经在Authority Pro主题中对此进行了测试。备份现有文件, 以便在出现问题时进行还原。

在functions.php文件中添加以下内容

//* 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
}

并且, 下面是style.css文件

/* 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;
        }

}

刷新页面以查看结果。如果有的话, 请不要忘记清除缓存。

你喜欢这个小优化吗？