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

南图

2022-02-16 / 0 评论 / 190 阅读 / 正在检测是否收录...

02/16

温馨提示：

本文最后更新于2022年02月16日，已超过1009天没有更新，若内容或图片失效，请留言反馈。

<!--动态滚动进度条-->
<div class="scroll-line" style="z-index: 999;position: fixed;height: 3px;margin-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>

代码