创世智能标题-滚动隐藏但向上滚动显示

在WordPress Genesis中实现智能粘性页眉的步骤

粘性页眉是一个很好的方式，让访问者在页面或文章的中间浏览您的网站。它帮助读者进一步浏览页眉菜单。

但是有一个问题。

粘性页眉在滚动时始终显示在屏幕上。这没问题，但是如果在小设备上浏览，则会影响可读性。

那么解决方案是什么呢？

一个智能页眉 – 向下滚动时隐藏，但在尝试向上滚动时立即显示。听起来很酷吧？

我已经在Authority Pro主题中测试过了。备份现有文件，以便在出现问题时可以恢复。

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

//* 智能页眉功能
add_action('wp_footer','yaoweibin_header_sticky_script');
function yaoweibin_header_sticky_script()
{
?>
		
<?php
}

并在style.css文件中添加以下内容

/* 智能页眉 */

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

}

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

你喜欢这个小优化吗？