建站资源下载详情
为您免费提供多种建站资源下载,包括网站模板下载、前端插件下载和字体下载!您只需注册为会员即可任意下载!

在页面滚动时隐藏或展现页面元素的JS插件Headroom.js

来源:易助科技网浏览量:11收藏

简介


Headroom.js 是一个轻量级、高性能的JS小工具(不依赖任何工具库!),它能在页面滚动时做出响应。此页面顶部的导航条就是一个鲜活的案例,当页面向下滚动时,导航条消失,当页面向上滚动时,导航条就出现了。


在页面滚动时隐藏或展现页面元素的JS插件Headroom.js-示例图



使用


1.  引入 headroom.js和jQuery.headroom.js 文件


2.  HTML


<!-- 初始状态 -->
<header class="headroom">
<!-- 向下滚动时 -->
<header class="headroom headroom--unpinned">
<!-- 向上滚动时 -->
<header class="headroom headroom--pinned">


3. 调用


纯 JS 调用方式


// 获取页面元素
var myElement = document.querySelector("header");
// 创建 Headroom 对象,将页面元素传递进去
var headroom  = new Headroom(myElement);
// 初始化
headroom.init();


以 jQuery/Zepto 插件形式调用


// 是不是很简单!// 注意: init() 默认在插件内部被调用了
$("#header").headroom();


插件还提供了一个 data-* API :


<!-- selects $("[data-headroom]") --><header data-headroom>


注意:为了兼容,Zepto 的 data module 也需要引入。



相关链接


官网地址 :https://wicky.nillia.ms/headroom.js/

github 地址 :https://github.com/WickyNilliams/headroom.js