head标签一般放什么（Headroom.jsGithubStar10K）

head标签一般放什么（Headroom.jsGithubStar10K）Headroom.js可在npm使用。安装：安装http://wicky.nillia.ms/headroom.js/playroom/当你更改设置，让后重新滚动网页，注意观察头部的显示与隐藏特效。特效网站截图：

简介

Headroom.js是一个轻量级，高性能的JS小组件（没有依赖项），允许您对用户的滚动做出反应。当你的网站上的标题在向下滚动时网页头部滑出视图，在向上滚动时网页头部滑回视图。Headroom.js组件功能强大并且没有依赖项，最新版本0.10.3，非压缩包大小为2.78k 压缩包大小为1.38k，对于想实现用户滚动网页时，实现网页头部的显示和隐藏功能，可以说选它Headroom.js准没错。

为什么要用它？

固定网页头部是一种流行的方法，用于使主导航保持与用户的距离。这可以减少用户快速浏览网站所需的工作量，但它们并非没有问题......

Headroom.js允许您在适当的时候将元素放入视图中，并在其余时间关注您的内容。

特效展示

官方特效网址：

http://wicky.nillia.ms/headroom.js/playroom/

当你更改设置，让后重新滚动网页，注意观察头部的显示与隐藏特效。

特效网站截图：

快速上手

安装

Headroom.js可在npm使用。安装：

npm install headroom.js --save ＃或... yarn add headroom.js

unpkg.com提供了一个通用版本（适用于脚本标记，CommonJS和AMD）：

https://unpkg.com/headroom.js

js

import Headroom from "headroom.js"; // select your header or whatever element you wish const header = document.querySelector("header"); const headroom = new Headroom(header); headroom.init();

自定义显示已隐藏条件 js 如下在new Headroom 对象加上options 自定义如下：

var options = { // vertical offset in px before element is first unpinned offset : 0 // scroll tolerance in px before state changes tolerance : 0 // or you can specify tolerance individually for up/down scroll tolerance : { up : 5 down : 0 } // css classes to apply classes : { // when element is initialised initial : "headroom" // when scrolling up pinned : "headroom--pinned" // when scrolling down unpinned : "headroom--unpinned" // when above offset top : "headroom--top" // when below offset notTop : "headroom--not-top" // when at bottom of scoll area bottom : "headroom--bottom" // when not at bottom of scroll area notBottom : "headroom--not-bottom" // when frozen method has been called frozen: "headroom--frozen" } // element to listen to scroll events on defaults to `window` scroller : someElement // callback when pinned `this` is headroom object onPin : function() {} // callback when unpinned `this` is headroom object onUnpin : function() {} // callback when above offset `this` is headroom object onTop : function() {} // callback when below offset `this` is headroom object onNotTop : function() {} // callback when at bottom of page `this` is headroom object onBottom : function() {} // callback when moving away from bottom of page `this` is headroom object onNotBottom : function() {} }; // pass options as the second argument to the constructor // supplied options are merged with defaults var headroom = new Headroom(element options); headroom.init();

css

.headroom { will-change: transform; transition: transform 200ms linear; } .headroom--pinned { transform: translateY(0%); } .headroom--unpinned { transform: translateY(-100%); }

然后你可以在网页上体验网页滚动，头部的显示与隐藏。

总结

Headroom.js 轻量级，高性能 没有任何依赖是这个组件流行的最主要原因，github star 10K 支持与JQuery和angularjs 的集成(官网有文档有提供方法)， 也支持自定义css实现网页头部显示隐藏的特效(官网有文档有提供方法)，代码量也非常小，前端同学必须了解哈。