参考：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. PVLAN 简介

    PVLAN(Private VLAN),即私有 VLAN.采⽤两层 VLAN 隔离技术,上层VLAN 全局可见,下层VLAN 相互隔离.PVLAN 通常用于企业内部网,用来防止连接到某些接⼝或接口组的 ...

  2. MySQL实现按天统计数据的方法

    一.首先生成一个日期表,执行SQL如下: CREATE TABLE num (i int); ), (), (), (), (), (), (), (), (), (); CREATE TABLE i ...

  3. rpm安装查看卸载软件

    1.安装 rpm -i 需要安装的包文件名 举例如下: rpm -i example.rpm 安装 example.rpm 包: rpm -iv example.rpm 安装 example.rpm ...

  4. linux查看目录下各个文件大小的命令

    linux查看目录下各个文件大小的命令 由于需要经常查看各个文件的具体大小 ,所以这里记一下. 命令如下: du -h --max-depth=1

  5. this直接加在函数或者是 “原型”对象的区别

    如果加在函数上,可以用函数直接调用,如果是加在原型对象时,那就的创建新对象,才能使用,最重要的是影响继承 直接加在函数上的,不能被新对象继承

  6. Java8新特性(一)_interface中的static方法和default方法

    什么要单独写个Java8新特性,一个原因是我目前所在的公司用的是jdk8,并且框架中用了大量的Java8的新特性,如上篇文章写到的stream方法进行过滤map集合.stream方法就是接口Colle ...

  7. springdata 多对多配置

  8. (最详细)小米Note 3的Usb调试模式在哪里打开的流程

    就在我们使用安卓手机链接PC的时候,或者使用的有些应用软件比如我们单位营销部门就在使用的应用软件引号精灵,之前使用的老版本就需要开启USB开发者调试模式下使用,现就在新版本不需要了,如果手机没有开启U ...

  9. mysql-SELECT子句的顺序

  10. 存储类&作用域&生命周期&链接属性

    链接属性 (1)大家知道程序从源代码到最终可执行程序,经历的过程:编译.链接. (2)编译阶段就是把源代码搞成.o目标文件,目标文件里面有很多符号和代码段.数据段.bss段等分段.符号就是编程中的变量 ...