自動隱藏標(biāo)題在網(wǎng)頁設(shè)計中穩(wěn)定流行了一段時間。 許多博客和在線雜志都使用粘性標(biāo)頭來保持用戶的參與度，并讓他們直接訪問導(dǎo)航 。

Medium用基本概念重新定義了此功能 ，該概念在向下滾動時 隱藏導(dǎo)航，而在向上 滾動時 顯示 導(dǎo)航 。 這個概念已成為一種流行的趨勢 ，現(xiàn)在您可以使用Headroom.js輕松復(fù)制它 。

Headroom.js是一個免費的原始JavaScript庫 ，沒有依賴項或過多的API功能。 您只需將其添加到HTML中，定位頁面標(biāo)題，然后運行它即可。

Headroom只是添加和刪??除某些動畫類CSS類，以便使用JavaScript 顯示/隱藏標(biāo)頭來檢測運動。

您可以自己制作此功能，但為什么要麻煩呢？ 凈空經(jīng)過測試并支持所有主要瀏覽器 。 如果您已經(jīng)在站點上安裝了JS庫，它甚至可以與jQuery或Zepto配合使用 。

您可以在GitHub存儲庫中找到大量代碼示例 ，但這是針對#header元素的簡單示例 ：

var myElement = document.querySelector("#header");// create a Headroom object passing in the #header element var headroom = new Headroom(myElement);// initialize the library headroom.init();

init()函數(shù)具有很多可定制的選項 。 您可以自定義不同的元素類 ，以及不同的事件觸發(fā)器回調(diào) ，在其中可以嵌入自己的函數(shù) 。 例如，如果您希望元素在onUnpin固定后消失，則可以使用onUnpin回調(diào)。

這些選項全部列在主插件頁面上 ，因此請檢查一下并查看您的想法。 如果要查看“運行中的余量”，請查看下面的筆 ，其中包含主演示頁面的完整副本 。

翻譯自: https://www.hongkiat.com/blog/headroom-js/

總結(jié)

以上是生活随笔為你收集整理的headroom.js_使用Headroom.js创建自动隐藏粘性标题的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。