听得入迷

听得入迷

愿世界安康,愿你我皆好!
  • 分类数量4
  • 标签数量12
  • 文章数量112
  • 评论数量4
2021-09-10

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

#技术

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

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

以下代码最好放到主题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>

引用原文地址

Comments