吸顶式进度条

在手机浏览器上加载的时候经常看到顶部有一个表示加载进度的蓝色条，而平时浏览器右侧的进度条又不够显眼，因此便想到模拟一个
我们可以用一个<div>表示进度条，其width占屏宽的比就可以表示进度

<div class="scroll-bar"></div>

把它固定到顶上，默认会从左向右延伸，如果被遮挡可以将z-index属性改大

.scroll-bar{
    position: fixed;
    background: lime;
    height: .3em;
}

给整个HTML绑上scroll事件，这里要注意比值的计算
$(window).scrollTop()获取的是当前窗口（上边界）被卷去的高度（即到顶部的距离）
$(document).height()获取的是文档的总高度
如果直接这么算，那么可以想象，滑到底部的时候进度条是跑不满的，而差的这部分就是$(window).height()，所以在分母上把它减掉
最后再用这个比值乘以$(window).width()
整体代码如下

$(document).on('scroll',function(e){
    $('.scroll-bar').width($(window).scrollTop() / ($(document).height() - $(window).height()) * $(window).width());
})

效果可以参考我的博客