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


技术卡片42 阅0 评

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

样式
样式

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

引用原文地址

最后更新 2021-11-01
评论 ( 0 )
OωO
隐私评论