Chào các bạn hôm nay mình sẽ hướng dẫn cho các bạn tạo thanh đọc hiển thị phần trăm khi cuộn chuột
HƯỚNG DẪN CÁCH LÀM
Bước 1: Tìm thẻ <body> và chèn đoạn code bên dưới lên nó<!-- Read Loading -->Bước 2: Để đoạn code trên hoạt động ta tìm đến thẻ đóng </body> và thêm đoạn code bên dưới xuống thẻ vừa tìm được
<b:if cond='data:blog.pageType == "item"'>
<div id='reading-progress'>
<span class='bar' id='progress-bar'/>
</div>
</b:if>
<!-- Reading -->Bước 3: Để làm đẹp code trên hãy tìm đến thẻ ]]></b:skin> và nhập đoạn css phía dưới lên trên nó
<script>//<![CDATA[
window.addEventListener('scroll', function(e) {
var s = (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop;
var body = document.body;
var html = document.documentElement;
var d = Math.max(body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight);
var c = window.innerHeight;
var position = (s / (d - c)) * 100;
document.getElementById('progress-bar').setAttribute('style', 'width: ' + position + '%');
});
//]]></script>
/* CSS Progress */Chúc bạn thành công!
#reading-progress{position:fixed;/*top:0px;*/width:100%;height:3px;margin:0px;left:0px;z-index:9999999999999;}
.bar{height:3px;background:#0088ff;box-shadow:0 0 10px rgba(0,136,255,0.7);position:fixed;z-index:9999999999999}
