JS代码
$(function() { function scroll_fn(){ document_height = $(document).height(); scroll_so_far = $(window).scrollTop(); window_height = $(window).height(); max_scroll = document_height-window_height; scroll_percentage = scroll_so_far/(max_scroll/100); $('#load').width(scroll_percentage + '%'); } $(window).scroll(function() { scroll_fn(); }); $(window).resize(function() { scroll_fn(); }); });
html部分
<div id="load"></div>
CSS部分
/*进度条CSS www.qyblog.cn*/ #load { background-color: #ff6651; height: 3px; width: 0px; position: fixed; left: 0px; top: 0px; z-index: 9999; }
一日程新手WP建站指南(https://www.yiricheng.cn/),为广大编程爱好者提供零基础快速搭建博客网站的方法,分享计算机网络、HTML、CSS、JavaScript、PHP、响应式设计以及Python自动化办公的博客文章,另有各类小工具、电子书、免费教程。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。