侧边栏壁纸
博主头像
听得入迷博主等级

走一走看一看

  • 累计撰写 116 篇文章
  • 累计创建 20 个标签
  • 累计收到 7 条评论

目 录CONTENT

文章目录

添加网页动态滚动进度条|滚动指示器

听得入迷
2021-09-10 / 0 评论 / 1 点赞 / 97 阅读 / 161 字

  看到别人的博客网页顶部有一个页面翻动的进度条,页面滚动到哪里进度条也相应变动长短。自己也加了一个。
样式

以下代码最好放到主题head

<!--动态滚动进度条-->
<div class="scroll-line" style="z-index: 999;position: fixed;height: 3px;top: 0px;background-color: #6B999B;width: 0%;"></div>
<script type="text/javascript">
    $(window).scroll(function() {
        var winTop = $(window).scrollTop(), //滚动条的位置
                docHeight = $(document).height(),   //文档高度
                winHeight = $(window).height(); //窗口高度
 
        var scrolled = (winTop / (docHeight - winHeight))*100;
 
        $('.scroll-line').css('width', (scrolled + '%'));
    });
</script>

引用原文地址

1

评论区