使用智能 CSS 基于用戶滾動位置應(yīng)用樣式

<header>I'm the page header</header>
<p>Lot's of content here...</p>
<p>More beautiful content...</p>
<p>Content...</p>

document.addEventListener('scroll', () => {
  document.documentElement.dataset.scroll = window.scrollY;
});

/* 保證 header標(biāo)簽始終高于 3em */
header {
  min-height: 3em;
  width: 100%;
  background-color: #fff;
}

/* 在網(wǎng)頁頂部保留與 header 的 min-height 雷同的高度 */
html:not([data-scroll='0']) body {
  padding-top: 3em;
}

/* 將 header 標(biāo)簽切換成 fixed 定位模式，并且將它固定在網(wǎng)頁頂部 */
html:not([data-scroll='0']) header {
  position: fixed;
  top: 0;
  z-index: 1;

  /* box-shadow 屬性能夠加強(qiáng)浮動的結(jié)果 */
  box-shadow: 0 0 .5em rgba(0, 0, 0, .5);
}

// 讀出當(dāng)前網(wǎng)頁的滾動位置并將其存入 document 的 data 屬性中
// 因此我們就可以在我們的樣式表中使用它
const storeScroll = () => {
  document.documentElement.dataset.scroll = window.scrollY;
}

// 監(jiān)聽滾動事件
document.addEventListener('scroll', storeScroll);

// 第一次打開網(wǎng)頁時就更新滾動位置
storeScroll();

// 防抖動函數(shù)接受一個我們自定義的函數(shù)作為參數(shù)
const debounce = (fn) => {

  // 這包含了對 requestAnimationFrame 的引用，所以我們可以在我們盼望的任何時候制止它
  let frame;
  
  // 防抖動函數(shù)將返回一個可以接受多個參數(shù)的新函數(shù)
  return (...params) => {
    
    // 假如 frame 的值存在，那就消滅對應(yīng)的回調(diào)
    if (frame) { 
      cancelAnimationFrame(frame);
    }

    // 使我們的回調(diào)在欣賞器下一幀刷新時實(shí)行
    frame = requestAnimationFrame(() => {
      
      // 實(shí)行我們的自定義函數(shù)并傳遞我們的參數(shù)
      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();

document.addEventListener('scroll', debounce(storeScroll), { passive: true });