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

在WordPressGenesis中实现智能粘贴标头的过程
粘性标头是让访问者在页面或帖子中部浏览你的网站的好方法。它可以帮助读者转到标题菜单进行进一步浏览。但是有一个问题。
向下滚动时, 粘性标题始终显示在屏幕上。没关系, 但是如果在小型设备上浏览, 那会打扰可读性。
那有什么解决方案？
智能标题–向下滚动时隐藏, 但在向上滚动时立即显示。听起来不错？
我已经在Authority Pro主题中对此进行了测试。备份现有文件, 以便在出现问题时进行还原。
在functions.php文件中添加以下内容

//* Smart Header Functionsadd_action('wp_footer', 'geekflare_header_sticky_script'); function geekflare_header_sticky_script(){?> < script> // Hide Header on Scroll Down but Show when Scroll Upvar 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 deltaif(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 DownjQuery('header.site-header').css('top', -navbarHeight).removeClass('shadow'); } else {// Scroll Upif(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; }}

刷新页面以查看结果。如果有的话, 请不要忘记清除缓存。
【Genesis智能标题–在滚动条上隐藏但在滚动条上显示】你喜欢这个小优化吗？