Genesis 智能标题 – 滚动时隐藏，向上滚动时可见

在 WordPress Genesis 中实现智能粘性标头的步骤

粘性标题是帮助访问者在页面或帖子之间导航网站的好方法。这有助于读者导航到标题菜单以进一步查看。

但有一个问题。

当您向下滚动时，粘性标题将始终保留在屏幕上。这很好，但如果您在小型设备上查看，可读性可能会受到影响。

那么解决办法是什么呢？

智能标题– 当您向下滚动时消失，但当您尝试向上滚动时立即出现。是不是很酷？

我用Authority Pro主题对此进行了测试。创建现有文件的备份，以便在出现问题时可以恢复它们。

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

 //* Smart Header Functions
add_action('wp_footer','_header_sticky_script');
function _header_sticky_script()
{
?>
		

下面在 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 ;
        }

} 

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

您喜欢这个小优化吗？