jQuery页面头部带进度指示的滚动页面特效

不定期的博客更新一直在进行中，这篇博文就来介绍jQuery页面头部带loading进度指示的滚动页面特效。

首先PO上链接：<a href="http://jackt.cn/test/scroll_progess_bar.html" target="_blank">jQuery页面头部带loading进度指示的滚动页面特效</a>。需要说明的是：这完全是我自己练习的页面，所以布局或者功能比较单一或简单，但这些都不重要，重要的是实现我博文标题说明的效果。

其实最后的代码量是很少的，关键就在js的代码（因为我的布局很简单），那接下来讲讲代码中需要注意的一些地方：

1.文章标题头部分是不随页面滚动的，我的实现方法是在其css代码中加上position:fixed;但这样浏览器会忽略标题头所占空间，文章部分会直接从浏览器左上角开始显示，导致前面几行文字被标题头覆盖，解决办法是在body的css样式里加上padding-top:50px;这里50px其实是标题头的高度和loading的高度的和，这样标题头也被撑开，在标题头的CSS里加上top:0;完美解决。

2.我做的demo滚动条浏览器自动实现的，并没有放在某个div里，所以在js代码中，要获取滚动条的高度位置等信息，直接用widow对象，PO上js部分代码：

function scroll_loadidng(){

    var document_height = $(document).height();//整个文档的高度
    var current_scroll_pos = $(window).scrollTop();//滚动条滑动块当前位置
    var window_height = $(window).height();//浏览器窗口高度

    var max_scroll = document_height-window_height;//整个文档的高度减去浏览器窗口高度就是需要滚动显示内容的高度

    var scroll_percentage = current_scroll_pos/(max_scroll/100);

    $('#loading').width(scroll_percentage + '%');

}

注释写得很清楚了，就不再一一解释。

3.在滚动条滚动时用这个函数响应，别忘了在浏览器重置大小后同样调用！