Tạo thanh đọc hiện thị phần trăm khi cuộn chuột
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}
0 Response to "Tạo thanh đọc hiện thị phần trăm khi cuộn chuột"
Đăng nhận xét