刚给头部导航加了个headroom.js,原因呢就是由于导航条是透明的,点开文章往下拉的时候 LOGO会遮住文字,因为固定了导航条,方便返回首页。所以就在想解决办法,刚好想起headroom.js的特性(为页面顶部多留些空间。在不需要页头时将其隐藏),所以我准备用上headroom.js。顺便也给大家一个教程,也当做自己的笔记。方便记住。

首先你需要将下面的css代码放到当前主题所使用的css样式里面(当然你也可以选择别的方式)

.headroom {
transition: transform 200ms linear;
}
.headroom--pinned {
transform: translateY(0%);
}
.headroom--unpinned {
transform: translateY(-100%);
}

然后在footer.php里面引入JS文件(header.php也可以)

headroom.min.js文件在最下面下载
接着再在footer.php调用headroom.js(记住拿script包着)

// 获取页面元素
var myElement = document.querySelector("header");
// 创建 Headroom 对象,将页面元素传递进去
var headroom  = new Headroom(myElement);
// 初始化
headroom.init(); 

其中括号里的header是你的导航元素。OK都弄好了就大功告成。
不过由于我的主题是全局ajax,所以在首页进入文章页时,就会失效。需要刷新页面才行。所以我也在找解决办法
本地下载