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 或其他足夠高的值,可以確保紅色線條始終顯示在其他內容的前面,不會被遮擋。