本篇分享利用 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

arrow
arrow
    文章標籤
    首陽問路 問路 程式設計 css語法 閱讀進度條 jquery教學 javascript html教學 網頁開發 前端工程師自學
    全站熱搜

    首陽 發表在 痞客邦 留言(1) 人氣()