利用计算网页页面的整体高度及顶部显示进度条的百分比。
效果截图：
HTML代码：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>网页顶部显示滚动高度比例</title>
</head>
<style type="text/css">
.placeholder{
height: 10024px;
}
</style>
<body>
<div class="headband"></div>
<div class="placeholder"></div>
</body>
<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/headBand.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
// 调用
$('.headband').headBand({
'background':'#6dcff6', //滚动进度条颜色
'height':"3" //高度
});
</script>
</html>headBand Js代码：
/**
* headBand
* @param {Object} $
*/
(function($) {
$.fn.extend({
headBand: function(option) {
var ViewH = $(window).height(),
ScrollH = $('body')[0].scrollHeight,
S_V = ScrollH - ViewH,
getThis = this.prop("className") !== "" ? "." + this.prop("className") : this.prop("id") !== "" ? "#" + this.prop("id") : this.prop("nodeName");
$(window).scroll(function() {
var ViewH_s = $(this).height(),
ScrollH_s = $('body')[0].scrollHeight,
ScoT_s = $(this).scrollTop(),
Band_w = 100 - (ScrollH_s - ViewH_s - ScoT_s) / S_V * 100;
defaultSetting = {
background: "green",
height: 3,
width: Band_w + '%'
};
setting = $.extend(defaultSetting, option);
$(getThis).css({
"background": setting.background,
'position': 'fixed',
'top': '0',
'z-index': '99999',
"height": setting.height + "px",
'width': defaultSetting.width
})
});
return this;
}
})
}(jQuery));