刚开始的时候我也觉得不可能,但是就是这么神奇,总有大神给你意想不到的惊喜。
快来感受一下把。(仔细看看头部黄色条的变化)
思考一下啊,怎么出现的那,其实作者使用了一点小技巧,那就是背景色渐变和遮挡产生的视觉效果。
再来欣赏一个图片,大概你就明白了。
看到了把,其实就是内容区域的背景色的渐变黄色部分,然后蒙层遮挡住露出顶部5px,显示背景色,产生的进度条效果。来代码
<style>
body{
background-image: linear-gradient(to right top, #ffcc00 %, #eee %);
background-size: % calc(% - 100vh + 5px);
background-repeat: no-repeat;
}
body::after{
content:"";
position: fixed;
top:5px;
left: ;
right: ;
bottom:;
background: #fff;/* 这里设置白色就好了 */
z-index: -;
}
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);
敲一下就明白了,赶快试试把!!!!