Tạo thanh đọc hiện thị phần trăm khi cuộn chuột

Tài liệu
Tạo thanh đọc hiện thị phần trăm khi cuộn chuột
Chuyên mục
Người đăng
Đăng vào
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 == &quot;item&quot;'>
<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!

Hiện có bình luận