模仿也是提高，純css小技巧實現頭部進度條
阿新 • • 發佈：2019-01-11
剛開始的時候我也覺得不可能，但是就是這麼神奇，總有大神給你意想不到的驚喜。
快來感受一下把。（仔細看看頭部黃色條的變化）
思考一下啊，怎麼出現的那，其實作者使用了一點小技巧，那就是背景色漸變和遮擋產生的視覺效果。
再來欣賞一個圖片，大概你就明白了。
看到了把，其實就是內容區域的背景色的漸變黃色部分，然後蒙層遮擋住露出頂部5px，顯示背景色，產生的進度條效果。來程式碼
<style> body{ background-image: linear-gradient(to right top, #ffcc00 50%, #eee 50%); background-size: 100% calc(100% - 100vh + 5px); background-repeat: no-repeat; } body::after{ content:""; position: fixed; top:5px; left: 0; right: 0; bottom:0; background: #fff;/* 這裡設定白色就好了 */ z-index: -1; } P{ font-size: 100px; } </style>
<body>
<div class="pic-wrap">
<p>好好好好好好好好好好好好好好好</p>
<p>好好好好好好好好好好好好好好好</p>
<p>好好好好好好好好好好好好好好好</p>
<p>好好好好好好好好好好好好好好好</p>
</div>
</body>
這個background-size為什麼這麼設定啊？
就是根據你滾動的距離設定的，因為背景色的高度肯定要跟你滾動的距離保持一致啊
我這裡就是超出可視區的部分，才會產生滾動條，所以是(100% - 100vh + 5px)；
敲一下就明白了，趕快試試把！！！！