摘要:今天分享的代码为网站增加一个顶部进度条代码
顶部进度条演示
进度条需要自行美化
#percentageCounter { position: absolute; left: 0; bottom: -1px; height: ...
顶部进度条演示
进度条需要自行美化
#percentageCounter { position: absolute; left: 0; bottom: -1px; height: 3px; z-index: 2; background-color: var(--theme); }
调用代码(在需要显示的增加以下代码)
<div id="percentageCounter"></div>
进度条代码 (这是js代码 增加到公共js,或者在<script>***</script>增加)
$(window).scroll(function() { var a = $(window).scrollTop(), c = $(document).height(), b = $(window).height(); scrollPercent = a / (c - b) * 100; scrollPercent = scrollPercent.toFixed(1); $("#percentageCounter").css({ width: scrollPercent + "%" }); }).trigger("scroll");