Hỗ trợ trực tuyến

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: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!

Trần Thanh Bình

Muốn giỏi phải học, muốn học thì phải hỏi. Chính vì thế, hãy cùng tham gia thảo luận với nhau để tìm ra câu trả lời nếu có thắc mắc nhé!. Xem thêm về tôi


Cùng tham gia bình luận bài viết này nhé!

» Hãy là con người văn minh từ những câu nói

Loading...