参考：https://www.w3cplus.com/css/pure-css-create-scroll-indicator.html

前言：细化总结。参考的文章作者已经写的很详细了。这里在从初学者 补充，也对自己的学习的过程补充记录（图片比较多）。

1:滚动条效 (图来源于第3方)。

第一眼看到这个 ：都想起了JavaScript实现(或者插件)。 注册滚动事件onscroll 。动态改变上图 宽度。(width值从0%变化到100%)，这一点都很好理解。

如何计算这个百分比呢？这里引出几个概念

  • document height:文档的高度$(document).height() 粗暴理解：页面总高度(包括了滚动条的高度) document 嘛 就是整个文档 所以的。
  • window height: 视窗高度$(window).height() ：视窗高度你眼睛看到的高度 body的高度 不包括 滚动条件 
  • 记住 心里默认几遍  (死记硬背)  ，这里有人不赞同 我们在结合实践出整理 (截图高度是934 控制台938 视窗高度 截图相差2px  忽略 )

结合小学知识：当前高度(包括滚动条件)/(总高度-当前页面高度) 最后结果：

($(window).scrollTop() / ($(document).height() - $(window).height())) * 100%就知道进度条的当前值。
结合图片：
前面的当做复习(做一个东西要理解他的原理 ，，不是为了实现而实现)重点来了：css实现
在css3 的时候 我们学过一个知识 渐变(不理解的给出网上搜索)。这里直接给出 http://www.runoob.com/try/try.php?filename=trycss3_gradient-linear_ltr
聪明的你很快就想起  在页面顶部 弄个这个。颜色是一样的。不就实现了吗。
给个图：
 
最后code：
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>ScrollIndicator</title>

    <style type="text/css">

        body {

             /* 线性渐变 (默认是从上往下)  从左往右 同时 到顶部 (左下角 到右上角  对角线) */

            background-image:  linear-gradient(to right top, #0089f2 50%, #DDD 50%);

            background-repeat: no-repeat;

            /* 指定背景图像的大小： 宽度 100% 高度 ： 100% -当前页面高度+body为元素 top 5px */

            background-size: 100% calc(100% - 100vh + 5px);

            /*vh https://www.cnblogs.com/yanxinhua/p/6635871.html*/

        }

        body::after {

            content: "";

            position: fixed;

            top: 5px;

            left: 0;

            bottom: 0;

            right: 0;

            background: #fff;

            z-index: -1;

        }

        h1 {

            font-size: 32px;

            line-height: 60px;

        }

        p {

            font-size: 24px;

            line-height: 30px;

            margin-top: 30px;

        }

    </style>

</head>

<body>

    <h1>CSS 实现滚动进度条效果</h1>

    <p>CSS 实现滚动进度条效果CSS 实现滚动进度条效果CSS 实现滚动进度条效果CSS 实现滚动进度条效果CSS 实现滚动进度条效果CSS 实现滚动进度条效果CSS 实现滚动进度条效果CSS 实现滚动进度条效果</p>

    <p>CSS 实现滚动进度条效果CSS 实现滚动进度条效果CSS 实现滚动进度条效果CSS 实现滚动进度条效果CSS 实现滚动进度条效果CSS 实现滚动进度条效果CSS 实现滚动进度条效果CSS 实现滚动进度条效果</p>

    <p>CSS 实现滚动进度条效果CSS 实现滚动进度条效果CSS 实现滚动进度条效果CSS 实现滚动进度条效果CSS 实现滚动进度条效果CSS 实现滚动进度条效果CSS 实现滚动进度条效果CSS 实现滚动进度条效果</p>

    <p>CSS 实现滚动进度条效果CSS 实现滚动进度条效果CSS 实现滚动进度条效果CSS 实现滚动进度条效果CSS 实现滚动进度条效果CSS 实现滚动进度条效果CSS 实现滚动进度条效果CSS 实现滚动进度条效果</p>

    <p>CSS 实现滚动进度条效果CSS 实现滚动进度条效果CSS 实现滚动进度条效果CSS 实现滚动进度条效果CSS 实现滚动进度条效果CSS 实现滚动进度条效果CSS 实现滚动进度条效果CSS 实现滚动进度条效果</p>

    <p>CSS 实现滚动进度条效果CSS 实现滚动进度条效果CSS 实现滚动进度条效果CSS 实现滚动进度条效果CSS 实现滚动进度条效果CSS 实现滚动进度条效果CSS 实现滚动进度条效果CSS 实现滚动进度条效果</p>

    <p>CSS 实现滚动进度条效果CSS 实现滚动进度条效果CSS 实现滚动进度条效果CSS 实现滚动进度条效果CSS 实现滚动进度条效果CSS 实现滚动进度条效果CSS 实现滚动进度条效果CSS 实现滚动进度条效果</p>

    <p>CSS 实现滚动进度条效果CSS 实现滚动进度条效果CSS 实现滚动进度条效果CSS 实现滚动进度条效果CSS 实现滚动进度条效果CSS 实现滚动进度条效果CSS 实现滚动进度条效果CSS 实现滚动进度条效果</p>

    <p>CSS 实现滚动进度条效果CSS 实现滚动进度条效果CSS 实现滚动进度条效果CSS 实现滚动进度条效果CSS 实现滚动进度条效果CSS 实现滚动进度条效果CSS 实现滚动进度条效果CSS 实现滚动进度条效果</p>

    <p>CSS 实现滚动进度条效果CSS 实现滚动进度条效果CSS 实现滚动进度条效果CSS 实现滚动进度条效果CSS 实现滚动进度条效果CSS 实现滚动进度条效果CSS 实现滚动进度条效果CSS 实现滚动进度条效果</p>

    <p>CSS 实现滚动进度条效果CSS 实现滚动进度条效果CSS 实现滚动进度条效果CSS 实现滚动进度条效果CSS 实现滚动进度条效果CSS 实现滚动进度条效果CSS 实现滚动进度条效果CSS 实现滚动进度条效果</p>

    <p>CSS 实现滚动进度条效果CSS 实现滚动进度条效果CSS 实现滚动进度条效果CSS 实现滚动进度条效果CSS 实现滚动进度条效果CSS 实现滚动进度条效果CSS 实现滚动进度条效果CSS 实现滚动进度条效果</p>

    <p>CSS 实现滚动进度条效果CSS 实现滚动进度条效果CSS 实现滚动进度条效果CSS 实现滚动进度条效果CSS 实现滚动进度条效果CSS 实现滚动进度条效果CSS 实现滚动进度条效果CSS 实现滚动进度条效果</p>

    <p>CSS 实现滚动进度条效果CSS 实现滚动进度条效果CSS 实现滚动进度条效果CSS 实现滚动进度条效果CSS 实现滚动进度条效果CSS 实现滚动进度条效果CSS 实现滚动进度条效果CSS 实现滚动进度条效果</p>

    <p>CSS 实现滚动进度条效果CSS 实现滚动进度条效果CSS 实现滚动进度条效果CSS 实现滚动进度条效果CSS 实现滚动进度条效果CSS 实现滚动进度条效果CSS 实现滚动进度条效果CSS 实现滚动进度条效果</p>

    <p>CSS 实现滚动进度条效果CSS 实现滚动进度条效果CSS 实现滚动进度条效果CSS 实现滚动进度条效果CSS 实现滚动进度条效果CSS 实现滚动进度条效果CSS 实现滚动进度条效果CSS 实现滚动进度条效果</p>

    <p>CSS 实现滚动进度条效果CSS 实现滚动进度条效果CSS 实现滚动进度条效果CSS 实现滚动进度条效果CSS 实现滚动进度条效果CSS 实现滚动进度条效果CSS 实现滚动进度条效果CSS 实现滚动进度条效果</p>

    <p>CSS 实现滚动进度条效果CSS 实现滚动进度条效果CSS 实现滚动进度条效果CSS 实现滚动进度条效果CSS 实现滚动进度条效果CSS 实现滚动进度条效果CSS 实现滚动进度条效果CSS 实现滚动进度条效果</p>

    <p>CSS 实现滚动进度条效果CSS 实现滚动进度条效果CSS 实现滚动进度条效果CSS 实现滚动进度条效果CSS 实现滚动进度条效果CSS 实现滚动进度条效果CSS 实现滚动进度条效果CSS 实现滚动进度条效果</p>

    <p>CSS 实现滚动进度条效果CSS 实现滚动进度条效果CSS 实现滚动进度条效果CSS 实现滚动进度条效果CSS 实现滚动进度条效果CSS 实现滚动进度条效果CSS 实现滚动进度条效果CSS 实现滚动进度条效果</p>

</body>

</html>

最近恶补习了css3  animation， transition，transform 动画等 有人和我说 学习了这些有什么用的。我没有回答。至少我知道 看别人写的动画自己也能写些简单的动画特效 ，不在懵里懵懂了 也少了很多js。 css3 真的很强大。

CSS 实现滚动进度条效果的更多相关文章

  1. 不可思议的纯 CSS 滚动进度条效果

    结论先行,如何使用 CSS 实现下述滚动条效果? 就是顶部黄色的滚动进度条,随着页面的滚动进度而变化长短. 在继续阅读下文之前,你可以先缓一缓.尝试思考一下上面的效果或者动手尝试一下,不借助 JS , ...

  2. 详解用CSS3制作圆形滚动进度条动画效果

    主  题 今天手把手教大家用CSS3制作圆形滚动进度条动画,想不会都难!那么,到底是什么东东呢?先不急,之前我分享了一个css实现进度条效果的博客<CSS实现进度条和订单进度条>,但是呢, ...

  3. 纯css使用线性渐变实现滚动进度条(来自于微信前端早读课）

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. 一、纯css实现顶部进度条随滚动条滚动

    一.效果图 二.直接复制粘贴 <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...

  5. 纯css实现进度条效果

    去年7月份做一个公司商城的微信页面(微信用的chrome内核)需要写一个提示返现进度的进度条效果. 一个完整的进度条效果其实可以拆分一下: 一段背景: 一小段的静态的斜纹进度条: 斜纹进度条用线性渐变 ...

  6. 创建一个jQuery UI的垂直进度条效果

    日期:2013-9-24  来源:GBin1.com 在线演示 缺省的jQuery UI只有水平的进度条效果,没有垂直的进度条效果,仅仅重新定义JQuery UI的CSS不能解决这个问题. 这里我们扩 ...

  7. N 种仅仅使用 HTML/CSS 实现各类进度条的方式

    本文将介绍如何使用 HTML/CSS 创建各种基础进度条及花式进度条及其动画的方式,通过本文,你可能可以学会: 通过 HTML 标签 <meter> 创建进度条 通过 HTML 标签 &l ...

  8. Javascript 及 CSS3 实现进度条效果

    Javascript 及 CSS3 实现进度条效果 一:css2 属性clip实现网页进度条:  在实现之前,我们先来介绍一下clip属性,因为这个属性在css2.1中很少使用到,所以我们有必要来了解 ...

  9. Android -- 真正的 高仿微信 打开网页的进度条效果

    (本博客为原创,http://www.cnblogs.com/linguanh/) 目录: 一,为什么说是真正的高仿? 二,为什么要搞缓慢效果? 三,我的实现思路 四,代码,内含注释 五,使用方法与截 ...

随机推荐

  1. Python_自定义递归的最大深度

    自定义递归的最大深度 python默认的最大递归深度为998,在有些情况下是不够用,需要我们自行设置.设置方式如下: import sys sys.setrecursionlimit(num) # n ...

  2. MySQL——合并查询结果

    利用  UNION 关键字,可以给出多条  SELECT  语句,并将它们的结果组合成一个结果集.合并时,两个表对应的列数和数据类型必须相同.SELECT 语句之间使用  UNION  或  UNIO ...

  3. 【python 字符串】 字符串的相关方法(二)

    查找元素所在的第一个的索引位置    text.find() 可有开始和结束位置查找  find('ex',3,6) # 查找元素的索引位置 text = 'alexalex' ret = text. ...

  4. Async/Await 学习与示例

    参考:Async/await学习 es 7 提供了对 promise 对象的更好的操作,省去了很多丧心病狂的链式异步请求,promise 是回调地狱的福音,而 Async/Await 则是 promi ...

  5. 百度编辑器html网页显示

    $(function () { var ue = UE.getEditor('content',{ serverUrl:'{:\\think\\Url::build("Ueditor/ind ...

  6. Django异步任务之Celery

    Celery celery 是一个用于实现异步任务的库, 在很多项目中都使用它, 它和 django 融合使用很完美. 使用 celery 可以在实现 http request请求返回 view 前做 ...

  7. java web 三大组件

    JavaWeb三大组件 Servlet,Filter,Listener. Servlet Servlet的作用 在Java web b/s架构中,servlet扮演了重要的角色,作为一个中转处理的容器 ...

  8. SSM框架中，controller的action返回参数给vue.js

    在SSM框架中,controller的action中,返回的是视图,即jsp页面或是ModelAndView,若是通过axios给vue传值的话,需要转换为字符串或是user实体类对象. 使用@Res ...

  9. 将图片转为base64

    DEMO: <input type="file" id="file" multiple="multiple"> <div ...

  10. [译]Ocelot - Caching

    原文 Ocelot支持基本的缓存,目前Ocelot的缓存是通过CacheManager project实现的. 下面的示例展示了如何启用缓存: s.AddOcelot() .AddCacheManag ...