通過將當前滾動偏移量添加到到 html 元素的屬性上，我們可以根據當前滾動位置設置頁面上的元素樣式。我們可以使用它來構建一個浮動在頁面頂部的導航組件。
這是我們將使用的 HTML，<header> 組件是我們希望當我們向下滾動時，始終浮動在頁面頂部的一個組件。
<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 代碼并不關心這一點，它的任務就是將滾動偏移量放在數據屬性中。這很完美，因為 JavaScript 和 CSS 之間沒有緊密耦合。
但仍有一些可以改進的地方，主要是在性能方面。
首先，我們必須修改 JavaScript 腳本，以適應頁面加載時滾動位置不在頂部的情況。在這樣的情況下，header 標簽將呈現錯誤的樣式。
頁面加載時，我們必須快速獲取當前的滾動偏移量，這樣確保了我們始終與當前的頁面的狀態同步。
// 讀出當前頁面的滾動位置并將其存入 document 的 data 屬性中// 因此我們就可以在我們的樣式表中使用它const storeScroll = () => { document.documentElement.dataset.scroll = window.scrollY;}// 監聽滾動事件document.addEventListener('scroll', storeScroll);// 第一次打開頁面時就更新滾動位置storeScroll();接下來我們將看一些性能方面改進。如果我們想要獲取 scrollY 滾動位置，瀏覽器將必須計算頁面上每個元素的位置，以確保它返回正確的位置。如果我們不強制它每次滾動都取值才是最好的做法。
要做到這一點，我們需要一個 debounce（防抖動）方法，這個方法會將我們的取值請求加入一個隊列中，在瀏覽器準備好繪制下一幀之前都不會重新取值，此時它已經計算出了頁面上所有元素的位置，所以它不會不斷重復相同的工作。
// 防抖動函數接受一個我們自定義的函數作為參數const debounce = (fn) => { // 這包含了對 requestAnimationFrame 的引用，所以我們可以在我們希望的任何時候停止它 let frame; // 防抖動函數將返回一個可以接受多個參數的新函數 return (...params) => { // 如果 frame 的值存在，那就清除對應的回調 if (frame) { cancelAnimationFrame(frame); } // 使我們的回調在瀏覽器下一幀刷新時執行 frame = requestAnimationFrame(() => { // 執行我們的自定義函數并傳遞我們的參數 fn(...params); }); } };// Reads out the scroll position and stores it in the data attribute// so we can use it in our stylesheetsconst storeScroll = () => { document.documentElement.dataset.scroll = window.scrollY;}// Listen for new scroll events, here we debounce our `storeScroll` functiondocument.addEventListener('scroll', debounce(storeScroll));// Update scroll position for first timestoreScroll();通過標記事件為 passive 狀態，我們可以告訴瀏覽器我們的滾動事件不會被觸摸交互阻止（例如與谷歌地圖等插件交互時）。這允許瀏覽器立即滾動頁面，因為它現在知道該事件不會被阻止。
document.addEventListener('scroll', debounce(storeScroll), { passive: true });解決了性能問題后，我們現在可以通過穩定的方式使用 JavaScript 將獲取的數據提供給 CSS，并可以使用它來為頁面上的元素添加樣式。
Live Demo on CodePen
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
