效果如圖
image.png
分析需求
看到這個效果，感覺這個跟隨滾動動畫，僅靠 CSS 是不可能完成的，因為這里涉及了頁面滾動距離的計算
分析一下難點：
- 如何得知用戶當前滾動頁面的距離并且通知頂部進度條？
正常分析應該是這樣的，但是這就陷入了傳統(tǒng)的思維。進度條就只是進度條，接收頁面滾動距離，改變寬度。如果頁面滾動和進度條是一個整體呢？
實現(xiàn)
我們運用線性漸變來實現(xiàn)這個功能
假設(shè)我們的頁面被包裹在 <body>中，可以滾動的是整個body，給它添加這樣一個從左下到到右上角的線性漸變
body {
background-image: linear-gradient(to right top, #ffcc00 50%, #eee 50%);
background-repeat: no-repeat;
}
運用一個偽元素，把多出來的部分遮?。?/p>
body::after {
content: "";
position: fixed;
top: 5px;
left: 0;
bottom: 0;
right: 0;
background: #fff;
z-index: -1;
}
這樣之后，滑到底的時候，進度條并沒有到底：
image.png
是因為 body 的線性漸變高度設(shè)置了整個 body 的大小，我們調(diào)整一下漸變的高度
body {
background-image: linear-gradient(to right top, #ffcc00 50%, #eee 50%);
background-size: 100% calc(100% - 100vh + 5px);
background-repeat: no-repeat;
}
這里使用了 calc 進行了運算，減去了 100vh，也就是減去一個屏幕的高度，這樣漸變剛好在滑動到底部的時候與右上角貼合。
而 + 5px 則是滾動進度條的高度，預留出 5px 的高度。
最后給個原作者的效果網(wǎng)頁：CodePen Demo -- 使用線性漸變實現(xiàn)滾動進度條
參考原文： 不可思議的純 CSS 滾動進度條效果
