CSS 小技巧

CSS小技巧 如何輕鬆製造滾動進度條

如何用CSS創建一個位於頁面頂部的紅色進度條,並且在頁面滾動時增長?

首先, 在 body 之間,加入進度條

 <div id="progress"></div> 

如果希望該紅色線條的位置始終位於頁面的最頂部,以下是代碼樣式:

<style>
  html {
    scroll-timeline: --page-scroll block;
  }

  @keyframes grow-progress {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
  }

  #progress {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 1em;
    background: red;
    transform-origin: 0 0; /* 修改这里的 transform-origin */
    animation: grow-progress auto linear;
    animation-timeline: --page-scroll;
  }
</style>

在上述代碼中修改了 transform-origin 屬性,將其設置為 transform-origin: 0 0; ,這將使紅色線條的增長始終從頁面的最頂部開始。這樣,無論頁面如何滾動,紅色線條都會始終位於最頂部。

如果希望紅色線條一直顯示在最前面,即使有其他內容(如圖片)遮擋,可以使用CSS中的z-index屬性來控制元素的堆疊順序。將z-index設置為一個較高的值,以確保該元素始終處於最頂層。

以下是修改後的代碼示例:

<style>
  html {
    scroll-timeline: --page-scroll block;
  }

  @keyframes grow-progress {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
  }

  #progress {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 1em;
    background: red;
    transform-origin: 0 0;
    animation: grow-progress auto linear;
    animation-timeline: --page-scroll;
    z-index: 9999; /* 设置一个较高的 z-index 值,以确保元素在最顶层 */
  }
</style>

通過將 z-index 設置為 9999 或其他足夠高的值,可以確保紅色線條始終顯示在其他內容的前面,不會被遮擋。

Similar Posts