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

最新推荐文章于 2023-04-03 19:32:45 发布

躺在草地看天空_

最新推荐文章于 2023-04-03 19:32:45 发布

阅读量608

点赞数

分类专栏： html5初学文章标签：顶部加载条 js网页加载条

本文链接：https://blog.csdn.net/PengShaoB/article/details/72765388

版权

html5初学专栏收录该内容

2 篇文章 0 订阅

订阅专栏

效果例子

阮一峰的ES6：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);
    });
  });