根据将当今翻转偏位量加上到到 html 元素的特性上，大家能够依据当今翻转部位设定网页页面上的元素款式。大家可使用它来搭建1个波动在网页页面顶部的导航栏组件。
这是大家将应用的 HTML，<header> 组件是大家期待当大家向下翻转时，自始至终波动在网页页面顶部的1个组件。
<header>I'm the page header</header> <p>Lot's of content here...</p> <p>More beautiful content...</p> <p>Content...</p>
最先，大家将监视 document 上的 'scroll' 恶性事件，而且每次客户翻转时大家都会取下当今的 scrollY 值。
document.addEventListener('scroll', () => {
document.documentElement.dataset.scroll = window.scrollY;
});
大家将翻转部位储存在 html 元素的数据信息特性中。假如您应用开发设计专用工具查询 DOM，它将以下所示：<html data-scroll="0">
如今大家可使用此特性来设定网页页面上的元素款式。
/* 确保 header标识自始至终高于 3em */
header {
min-height: 3em;
width: 100%;
background-color: #fff;
}
/* 在网页页面顶部保存与 header 的 min-height 同样的高宽比 */
html:not([data-scroll='0']) body {
padding-top: 3em;
}
/* 将 header 标识切换为 fixed 精准定位方式，而且将它固定不动在网页页面顶部 */
html:not([data-scroll='0']) header {
position: fixed;
top: 0;
z-index: 1;
/* box-shadow 特性可以提高波动的实际效果 */
box-shadow: 0 0 .5em rgba(0, 0, 0, .5);
}
基础上便是这样，当客户向下翻转时，header 标识将全自动从网页页面中分刘海离并波动在內容之上。JavaScript 编码其实不关注这1点，它的每日任务便是将翻转偏位量放在数据信息特性中。这很完善，由于 JavaScript 和 CSS 之间沒有密不可分藕合。
但仍有1些能够改善的地区，关键是在特性层面。
最先，大家务必改动 JavaScript 脚本制作，以融入网页页面载入时翻转部位不在顶部的状况。在这样的状况下，header 标识将展现不正确的款式。
网页页面载入时，大家务必迅速获得当今的翻转偏位量，这样保证了大家自始至终与当今的网页页面的情况同歩。
// 读取当今网页页面的翻转部位并将其存入 document 的 data 特性中
// 因而大家便可以在大家的款式表格中应用它
const storeScroll = () => {
document.documentElement.dataset.scroll = window.scrollY;
}
// 监视翻转恶性事件
document.addEventListener('scroll', storeScroll);
// 第1次开启网页页面时就升级翻转部位
storeScroll();
接下来大家将看1些特性层面改善。假如大家要想获得 scrollY 翻转部位，访问器将务必测算网页页面上每一个元素的部位，以保证它回到正确的部位。假如大家不强制性它每次翻转都赋值才是最好是的做法。
要保证这1点，大家必须1个 debounce（防颤动）方式，这个方式会将大家的赋值恳求添加1个序列中，在访问器提前准备好绘图下1帧以前都不容易再次赋值，此时它早已测算出了网页页面上全部元素的部位，因此它不容易持续反复同样的工作中。
// 防颤动涵数接纳1个大家自定的涵数做为主要参数
const debounce = (fn) => {
// 这包括了对 requestAnimationFrame 的引入，因此大家能够在大家期待的任什么时候候终止它
let frame;
// 防颤动涵数将回到1个能够接纳好几个主要参数的新涵数
return (...params) => {
// 假如 frame 的值存在，那就消除对应的回调函数
if (frame) {
cancelAnimationFrame(frame);
}
// 使大家的回调函数在访问器下1帧更新时实行
frame = requestAnimationFrame(() => {
// 实行大家的自定涵数并传送大家的主要参数
fn(...params);
});
}
};
// Reads out the scroll position and stores it in the data attribute
// so we can use it in our stylesheets
const storeScroll = () => {
document.documentElement.dataset.scroll = window.scrollY;
}
// Listen for new scroll events, here we debounce our `storeScroll` function
document.addEventListener('scroll', debounce(storeScroll));
// Update scroll position for first time
storeScroll();
根据标识恶性事件为 passive 情况，大家能够告知访问器大家的翻转恶性事件不容易被触碰互动阻拦（比如与谷歌地形图等软件互动时）。这容许访问器马上翻转网页页面，由于它如今了解该恶性事件不容易被阻拦。
document.addEventListener('scroll', debounce(storeScroll), { passive: true });
处理了特性难题后，大家如今能够根据平稳的方法应用 JavaScript 将获得的数据信息出示给 CSS，并可使用它来为网页页面上的元素加上款式。
Live Demo on CodePen
以上便是本文的所有內容，期待对大伙儿的学习培训有一定的协助，也期待大伙儿多多适用脚本制作之家。
Copyright © 2002-2020 html网页制作_php网页制作_网页设计稿_网页编辑工具_学生网页设计模板 版权所有 （网站地图） 粤ICP备10235580号