home subdirectory_arrow_left

Top Ad unit 728 × 90

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!
Tạo thanh đọc hiện thị phần trăm khi cuộn chuột Đánh giá bởi Star Bình trên tháng 11 24, 2017 Xếp hạng: 5

3 nhận xét:

avatar
Trường Nguyễn

Sửa phần Người thiết kế, dẫn link về bacsiwindows.com dùm tui.

TRẢ LỜI

Đang lên mobi, khi nào onl pc chỉnh lại sau

TRẢ LỜI
avatar
Niệm Style Blog

Temp cũng đc thôi! mình nghĩ nên thay đổi font chữ khác, font này ko đẹp!

TRẢ LỜI

THAM GIA BÌNH LUẬN NGAY!

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

Copyright © 2017 Star Bình Blog
Designed & Developed by Tran Thanh Binh