实现阮一峰ES6的顶部加载条效果

你的名字 2022-06-15 06:37 183阅读 0赞

## 效果例子 ##

> 阮一峰的ES6：[http://es6.ruanyifeng.com/?search=s&x=13&y=3][http_es6.ruanyifeng.com_search_s_x_13_y_3]

## html + css ##

<style type="text/css">
        #loading-progress{
            position: fixed;
            top: 0;
            left: 0;
            height: 3px;
            background-color: #0A74DA;
            z-index: 100;
        }
      </style>
      <div id="loading-progress"></div>

## jquery监听滚动事件 ##

$(document).ready(function() {
        
        // 监听内容的滚动事件
        $("#content").scroll(function() {
        
          var progress =
            $(this).context.scrollTop / ($(this).context.scrollHeight - $(this).context.offsetHeight);
          if (progress >= 1) {
            progress = 1;
          }
          var width = document.body.clientWidth * progress;
          console.log(width);
          // 设置 加载条 的宽度
          $("#loading-progress").width(width);
        });
      });

[http_es6.ruanyifeng.com_search_s_x_13_y_3]: http://es6.ruanyifeng.com/?search=s&x=13&y=3

发表评论取消回复

表情：

评论列表（有 0 条评论，183人围观）

还没有评论，来说两句吧...

相关阅读

相关阮一峰前辈的部分前端内容

一峰大佬的内容实在太多，我整理了一些前端实用的内容，方便查看。 1. [只要一行代码，实现五种 CSS 经典布局][CSS] ----------------

怼烎@/ 2023年01月03日 06:35/ 0 赞/ 181 阅读

相关加密（一）- 阮一峰：RSA算法原理

前提：非对称加密非对称应用场景既然对称加密存在局限性，那么有没有这样一种加密方式，即便鲍勃和爱丽丝从未见过面，也能够让他们实现安全通信？答案就是采用非对称加

悠悠/ 2022年12月11日 03:19/ 0 赞/ 388 阅读

相关 Flex 布局教程：语法篇（阮一峰）

[阿里云 ][Link 1] > [教程中心][Link 2] > [html教程 ][html_] > [Flex 布局教程：语法篇（阮一峰） ][Flex _]

谁践踏了优雅/ 2022年08月31日 00:47/ 0 赞/ 1398 阅读

相关 ECMAScript6入门简述&索引篇（摘自阮一峰的《ECMAScript 6 入门》）

函数扩展 1、函数参数可以有默认值 function log(x, y = 'World') { console.log(x, y); }

痛定思痛。/ 2022年07月14日 18:53/ 0 赞/ 311 阅读

相关实现阮一峰ES6的顶部加载条效果

效果例子 > 阮一峰的ES6：[http://es6.ruanyifeng.com/?search=s&x=13&y=3][http_es6.ruanyifeng.com

你的名字/ 2022年06月15日 06:37/ 0 赞/ 184 阅读

相关 TCP/IP协议入门（一）--阮一峰

http://www.ruanyifeng.com/blog/2012/05/internet\_protocol\_suite\_part\_i.html TCP/IP

我就是我/ 2022年06月13日 08:56/ 0 赞/ 265 阅读

相关阮一峰《ECMAScript 6 入门》：let 和 const 命令

以下内容全文出自阮一峰的书：《ECMAScript 6 入门》 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text

╰+攻爆jí腚メ/ 2022年04月10日 13:46/ 0 赞/ 204 阅读

相关微信小程序阮一峰的记录

摘抄自：阮一峰的笔记之一仿购物车数量的增减 [https://blog.csdn.net/michael\_ouyang/article/details

爱被打了一巴掌/ 2021年11月17日 10:44/ 0 赞/ 328 阅读

相关阮一峰的JavaScript 的 this 原理

一、问题的由来学懂 JavaScript 语言，一个标志就是理解下面两种写法，可能有不一样的结果。 > var obj = { > foo: fu

系统管理员/ 2021年07月26日 15:58/ 0 赞/ 434 阅读

相关阮一峰的学习Javascript闭包（Closure）

闭包（closure）是Javascript语言的一个难点，也是它的特色，很多高级应用都要依靠闭包实现。下面就是我的学习笔记，对于Javascript初学者应该是很有用的。

男娘i/ 2021年07月26日 13:04/ 0 赞/ 477 阅读