自动隐藏标题在网页设计中稳定流行了一段时间。 许多博客和在线杂志都使用粘性标头来保持用户的参与度,并让他们直接访问导航 。
Medium用基本概念重新定义了此功能 ,该概念在向下滚动时 隐藏导航,而在向上 滚动时 显示 导航 。 这个概念已成为一种流行的趋势 ,现在您可以使用Headroom.js轻松复制它 。
Headroom.js是一个免费的原始JavaScript库 ,没有依赖项或过多的API功能。 您只需将其添加到HTML中,定位页面标题,然后运行它即可。
Headroom只是添加和删除某些动画类CSS类,以便使用JavaScript 显示/隐藏标头来检测运动。
您可以自己制作此功能,但为什么要麻烦呢? 净空经过测试并支持所有主要浏览器 。 如果您已经在站点上安装了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
回调。
这些选项全部列在主插件页面上 ,因此请检查一下并查看您的想法。 如果要查看“运行中的余量”,请查看下面的笔 ,其中包含主演示页面的完整副本 。