使用Headroom.js创建自动隐藏粘性标题

自动隐藏标题在网页设计中稳定流行了一段时间。 许多博客和在线杂志都使用粘性标头来保持用户的参与度，并让他们直接访问导航 。

Medium用基本概念重新定义了此功能 ，该概念在向下滚动时 隐藏导航，而在向上 滚动时 显示 导航 。 这个概念已经成为一种流行的趋势 ，现在您可以使用Headroom.js轻松复制它 。

Headroom.js是一个免费的原始JavaScript库 ，没有依赖项或过多的API功能。 您只需将其添加到HTML中，定位页面标题，然后运行它。

Headroom只是添加和删​​除某些动画类CSS类，以便使用JavaScript检测运动来显示/隐藏标题 。

您可以自己实现此功能，但是为什么要麻烦呢？ Headroom经过测试，并支持所有主流浏览器 。 如果您已经在站点上安装了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()函数具有很多可定制的选项 。 您可以自定义不同的元素类 ，以及不同的事件触发器回调 ，在其中可以嵌入自己的函数 。 例如，如果您希望元素在onUnpin固定后消失，则可以使用onUnpin回调。

这些选项全部列在主插件页面上 ，因此请检查一下并查看您的想法。 如果要查看“运行中的余量”，请查看下面的笔 ，其中包含主演示页面的完整副本 。

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