网站建设使用Headroom.js创建自动隐藏固定标题

自动隐藏标题在网页设计中稳定流行了一段时间。许多博客和在线杂志都使用粘性标头来保持用户的参与度,并让他们直接访问导航。 中已经重新定义了这个功能用一个基本的概念是皮的导航,同时向下滚动,但显示它同时向上滚动。这个概念已经成为一种流行的趋势,现在您可以使用Headroom.js轻松复制它。 Headroom.j WP网站建设

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

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

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

WordPress网站建设

WordPress网站建设

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回调。

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

原创文章,作者:网站建设,如若转载,请注明出处:https://www.davidwu.net/archives/10741

发表评论

电子邮件地址不会被公开。 必填项已用*标注

联系我们

在线咨询:点击这里给我发消息

邮件:itbound@sina.com

工作时间:周一至周六,9:30-18:30

 

QR code