有時候，我們希望頁面之間能很方便的導航，所以我們將導航欄固定在頂部，但當我們希望頁面顯示更多內容的時候，它是多餘的。解決這個矛盾的一種好辦法是讓導航欄隨滾動條地滾動顯示和隱藏。就像下圖這樣。
環境
流程
首先，在header.php中將headroom.js引入，寫好導航欄顯示和消失的樣式，因爲headroom是通過監聽滾動條和控制導航欄的css來實現其顯示和隱藏。
<script src="http://你的地址/wp-content/themes/Snape/js/headroom.js"></script>
<style>
.headroom {
will-change: transform;
transition: transform 200ms linear;
}
.headroom--pinned {
transform: translateY(0%);
}
.headroom--unpinned {
transform: translateY(-100%);
}
</style>
找到包裹導航欄的容器，Snape主題用的是這樣的結構。
...
<body>
<nav>
...
</nav>
...
</body>
...
在這裏，nav就是導航欄的容器，給它指定一個id，並在其下添加js腳本調用headroom.js。
...
<body>
<nav id="scroll-nav">
...
</nav>
...
<script>
const header = document.querySelector("#scroll-nav");
var headroom = new Headroom(header, {
"tolerance": 0,
"offset": 50,
"classes": {
"initial": "headroom", // 當元素初始化後所設置的class
"pinned": "headroom--pinned", // 向上滾動時設置的class
"unpinned": "headroom--unpinned" // 向下滾動時所設置的class
}
});
headroom.init();
</script>
</body>
...
offset : 在元素沒有固定之前，垂直方向的偏移量（以px爲單位）。意思是，當滾動條下拉達到offset時，導航欄開始上滑。
tolerance : 狀態改變前的px滾動容差。也就是說，拉動滾動條的速率也會影響導航欄的狀態，容差越高，要想收起導航欄，拉動滾動條的速率就要越快。
各位看官可前往headroom-playroom自行嘗試。
總結
這種辦法可以應用到所有固定在頂部的組件。
歡迎留言指正。