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:if cond='data:blog.pageType == "item"'>
<div id='reading-progress'>
<span class='bar' id='progress-bar'/>
</div>
</b:if>
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
<!-- Reading -->
<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>
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ó
/* CSS Progress */
#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}
Chúc bạn thành công!
0 Nhận xét