Cách tạo Scroll Progress Bar cho wordpress

Scroll Progress Bar là gì? Hiểu theo cách đơn giản thì scroll progress bar là một thành màu sắc chạy ngang trên đầu giao diện website/blog khi scroll kéo thanh cuộn xuống.
Sử dụng code
Bạn chèn vào bất cứ đâu bạn hiển thị, như bạn thấy ở website vietbug.com tôi chèn vào footer
HTML

<div class="KW_progressContainer">
        <div class="KW_progressBar">
        </div>

CSS

.KW_progressContainer {
  left:0;
  width: 100%;
  height: 0.4em;
  margin-bottom: 0px;
  position: fixed;
  bottom: 0px;
  overflow: hidden;
  background-color: #fff;
  content: "";
    display: table;
    table-layout: fixed;
}

.KW_progressBar {
  width: 0%;
  float: left;
  height: 100%;
  z-index:99;
  max-width: 100%;
  background-color:orange;
  -webkit-transition: width .6s ease;
  -o-transition: width .6s ease;
  transition: width .6s ease;
}

JAVASCRIPT

$(window).load(function(){
  $(window).scroll(function() {
    var wintop = $(window).scrollTop(), docheight = $('article').height(), winheight = $(window).height();
    console.log(wintop);
    var totalScroll = (wintop/(docheight-winheight))*100;
    console.log("total scroll" + totalScroll);
    $(".KW_progressBar").css("width",totalScroll+"%");
  });

});

Sử dụng plugin
Với các trường hợp không am hiểu code lắm thì bạn cài plugin cho nhanh cũng được, cái gì thêm dễ thì mình vẫn ưu tiên dùng code nhẹ web, không sao cả miễn là kết quả vẫn như mong muốn của bạn.
Một số plugin bạn có thể tham khảo và cài thử:
– Reading progressbar
– Catch Scroll Progress Bar

Chúc bạn thành công. Have a nice day.
Vui lòng ghi rõ nguồn khi chia sẻ. Thanks.