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

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

Headroom.js是一個(gè)免費(fèi)的原始JavaScript庫(kù) ，沒(méi)有依賴項(xiàng)或過(guò)多的API功能。 您只需將其添加到HTML中，定位頁(yè)面標(biāo)題，然后運(yùn)行它即可。

Headroom只是添加和刪??除某些動(dòng)畫類CSS類，以便使用JavaScript 顯示/隱藏標(biāo)頭來(lái)檢測(cè)運(yùn)動(dòng)。

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

您可以在GitHub存儲(chǔ)庫(kù)中找到大量代碼示例 ，但這是針對(duì)#header元素的簡(jiǎn)單示例 ：

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

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

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

總結(jié)

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

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