登录/注册后可看大图
今天实现的最终效果，如上图所示，不难但实现效果很精致。
顶部的滚动进度条，随着页面的滚动进度而长短变化。
在开始阅读之前，请鱼油缓一缓，思考下（欢迎下方留言）：
纯手动或者用 JS 如何实现？
嗯........
假设鱼油思考完毕。
登录/注册后可看大图
是不是想到页面监听然后动态算比例？
或者计算页面滚动距离，然后画滚动条？
其实不用那么复杂啦，纯用 CSS 就好了。
登录/注册后可看大图
意淫一下，等学了《零基础入门学习Web开发》（HTML5 & CSS3）这个系列你也会这么厉害。
目前，可以先尝鲜练练手。
如果想只用 CSS 实现，只能另辟蹊径，使用一些“障眼法”。
好，下面就借助一些奇技淫巧，使用 CSS 一步一步完成这个效果。
分析一下难点：
如何得知用户当前滚动页面的距离并且通知顶部进度条？
正常分析应该是这样的，但是这就陷入了一个尴尬的处境。
进度条就只是进度条，接收页面滚动距离，改变宽度。
如果页面滚动和进度条是一个整体呢？
手把手环节
好了，不瞎得瑟了，运用线性渐变就可以。
关于线性渐变是什么，这里不做解释，自行参看：打造高质高的【按钮】
创建基本结构：
- 鱼C-进度条
- 鱼C-纯 CSS 进度条效果
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci aliquid, at consectetur dolorem ducimus error esse
- ex expedita explicabo fuga fugit laborum maiores maxime nisi repudiandae sit ut! Ipsum, minus!
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto illo iusto minima minus porro repellendus! Ad
- earum eligendi, enim et maxime nam quia quos sit temporibus! Dolores iusto optio provident.
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus assumenda aut consequuntur delectus maxime minus
- molestiae necessitatibus omnis optio quia quis, ut velit vero? Ab adipisci deserunt dolorum ut voluptatibus!
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci aliquid, at consectetur dolorem ducimus error esse
- ex expedita explicabo fuga fugit laborum maiores maxime nisi repudiandae sit ut! Ipsum, minus!
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto illo iusto minima minus porro repellendus! Ad
- earum eligendi, enim et maxime nam quia quos sit temporibus! Dolores iusto optio provident.
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus assumenda aut consequuntur delectus maxime minus
- molestiae necessitatibus omnis optio quia quis, ut velit vero? Ab adipisci deserunt dolorum ut voluptatibus!
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci aliquid, at consectetur dolorem ducimus error esse
- ex expedita explicabo fuga fugit laborum maiores maxime nisi repudiandae sit ut! Ipsum, minus!
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto illo iusto minima minus porro repellendus! Ad
- earum eligendi, enim et maxime nam quia quos sit temporibus! Dolores iusto optio provident.
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus assumenda aut consequuntur delectus maxime minus
- molestiae necessitatibus omnis optio quia quis, ut velit vero? Ab adipisci deserunt dolorum ut voluptatibus!
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci aliquid, at consectetur dolorem ducimus error esse
- ex expedita explicabo fuga fugit laborum maiores maxime nisi repudiandae sit ut! Ipsum, minus!
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto illo iusto minima minus porro repellendus! Ad
- earum eligendi, enim et maxime nam quia quos sit temporibus! Dolores iusto optio provident.
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus assumenda aut consequuntur delectus maxime minus
- molestiae necessitatibus omnis optio quia quis, ut velit vero? Ab adipisci deserunt dolorum ut voluptatibus!
- 1.FishC
- 2.零基础入门学习scratch
- 2.零基础入门学习python
- 2.零基础入门学习web
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. A ab aliquam asperiores consectetur consequatur doloribus,
- fugit inventore iste, libero minus, repudiandae saepe sint. Doloremque dolorum eius odio quos repellendus totam?
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam assumenda aut commodi, earum enim ex excepturi
- explicabo incidunt ipsum neque quaerat quasi quis! Dignissimos earum nisi non quam temporibus vero?
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci architecto aut mollitia nemo. Dolore earum, ipsam
- nemo neque nihil nobis omnis, quae quisquam quo repellendus rerum veniam voluptatem? Dolor, vero.
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci aliquid, at consectetur dolorem ducimus error esse
- ex expedita explicabo fuga fugit laborum maiores maxime nisi repudiandae sit ut! Ipsum, minus!
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto illo iusto minima minus porro repellendus! Ad
- earum eligendi, enim et maxime nam quia quos sit temporibus! Dolores iusto optio provident.
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus assumenda aut consequuntur delectus maxime minus
- molestiae necessitatibus omnis optio quia quis, ut velit vero? Ab adipisci deserunt dolorum ut voluptatibus!
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci aliquid, at consectetur dolorem ducimus error esse
- ex expedita explicabo fuga fugit laborum maiores maxime nisi repudiandae sit ut! Ipsum, minus!
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto illo iusto minima minus porro repellendus! Ad
- earum eligendi, enim et maxime nam quia quos sit temporibus! Dolores iusto optio provident.
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus assumenda aut consequuntur delectus maxime minus
- molestiae necessitatibus omnis optio quia quis, ut velit vero? Ab adipisci deserunt dolorum ut voluptatibus!
现在我们的基本页面结构就搞定了，全部包裹于 body 元素中。
当页面滚动，为 body 添加一个从左下到右上角的线性渐变：
- body {
- background-image: linear-gradient(to right top, #2ebb96 50%, #eee 50%);
- background-repeat: no-repeat;
- }
-
后面操作也都是 CSS 样式设置， 所以略去 style 元素不写了哈。
我们得到的效果：
登录/注册后可看大图
不错哦，鱼C-元气绿（#2ebb96）的色块变化，其实很像一个整体变化的进度条了。
仔细观察最上面的效果，我们用另一个颜色把除了最上面的其他部分都遮盖起来，效果岂不就出来啦？！
怎么搞？
用伪类元素，把多出来的部分遮盖住。
还是不做详细介绍，自行参看：0 0 3 1 - 用伪类选择器让列表'嗑粉儿'
为 body 元素添加伪类：
- body::after {
- content: "";
- position: fixed;
- top: 6px;
- left: 0;
- bottom: 0;
- right: 0;
- background: red;
- z-index: -1; }
添加了一个距离上边界 6px 且置顶层的红色背景色：
登录/注册后可看大图
上面的滚动条出来了吧？！
现在把背景色改为白色：
效果就出来了：
登录/注册后可看大图
眼尖的鱼油会发现，最后鼠标来回摆动的地方有一些小尴尬...
滑到底的时候，进度条并没有到底，怎么肥四呢？
是因为 body 的线性渐变高度设置了整个 body 的大小，需要控制背景图的大小。
CSS 中有一个 background-size 属性，这个属性可以帮助我们控制背景图大小，也就是渐变图的大小。
而对于 background-size 需要的是其 y 轴的值。
那问题又来了，y 轴的值怎么确定？
现在的视窗高度，就是 100vh，一个屏幕的高度。
background-size 的 y 可以通过：
要得到100% - 100vh的值还需要使用 CSS 中的 calc()：
- body {
- background-image: linear-gradient(to right top, #2ebb96 50%, #eee 50%);
- background-repeat: no-repeat;
- background-size: 100% calc(100% - 100vh + 6px); }
这里使用了 calc 进行了运算，减去了 100vh，也就是减去一个屏幕的高度。
这样渐变刚好在滑动到底部的时候与右上角贴合。
而 + 6px 则是滚动进度条的高度，预留出 6px 的高度。
再看看效果：
登录/注册后可看大图
登录/注册后可看大图
搞定，收工？！
源码下载：
登录/注册后可看大图
如果喜欢，别忘了评分 ：
登录/注册后可看大图
这位鱼油，如果喜欢本系列HTML帖子，请订阅 专辑☞（传送门）（不喜欢更要订阅 ）
免责声明：本文内容部分来源于网络，出于网络分享目的，如对您的权益版权有异议我们将予以删除，谢谢合作！ |
|
千家悦IOT开放平台