本篇分享利用 javascript, jQuery 實作『閱讀進度條』，可以根據使用者觀看文章的位置，顯示成百分比進度條。
很多閱讀類型的網站也有這個功能。目前有成功把此功能使用到痞客邦中，不過痞客邦要使用 javascript 需要『手機認證』過，請注意！！！
詳細效果可以參考上圖。
以下是程式碼，改編自網路上的範例，只要把第 19-63 行複製到『側欄管理』的『公告版位』中，即可喔！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
height: 5500px;
background: rgb(63,94,251);
background: linear-gradient(45deg, rgba(63,94,251,1) 24%, rgba(252,70,107,0.5) 100%);
}
h3{text-align: center;line-height: 100px}
</style>
</head>
<body>
<h3>請向下滾動頁面，查看效果</h3>
<div id="progress_bar"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
(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': '77px',
'left': '0',
'z-index': '99999',
"height": setting.height + "px",
'width': defaultSetting.width
})
});
return this
}
})
}(jQuery));
</script>
<script>
$(document).ready(function() {
$('#progress_bar').headBand({
'background': "linear-gradient(45deg, rgba(63,94,251,1) 24%, rgba(252,70,107,1)",
'height':"5"
});
});
</script>
</body>
</html>網路上有另外找到用單純 css 製作的，不過使用條件比較嚴苛：https://codepen.io/specialCoder/pen/MWyYvEN
文章標籤
全站熱搜
留言列表
修行精選 (3)
