Tạo Scroll Indicator cho trang web

Chào mọi người, hôm nay chúng ta sẽ cùng tạo Scroll Indicator cho trang web của mình. View demo

Step1: Các bạn tạo 1 file HTML và add đoạn code sau:

<div class="header">
  <h2>Scroll Indicator</h2>
  <div class="progress-container">
    <div class="progress-bar" id="myBar"></div>
  </div> 
</div>

<div>content...</div>

Step2: Add css:

/* Style the header: fixed position (always stay at the top) */
.header {
  position: fixed;
  top: 0;
  z-index: 1;
  width: 100%;
  background-color: #f1f1f1;}

/* The progress container (grey background) */
.progress-container {
  width: 100%;
  height: 8px;
  background: #ccc;}

/* The progress bar (scroll indicator) */
.progress-bar {
  height: 8px;
  background: #4caf50;
  width: 0%;}

Step3: Add JavaScript:

// When the user scrolls the page, execute myFunction window.onscroll = function() {myFunction()};

function myFunction() {
  var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
  var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
  var scrolled = (winScroll / height) * 100;
  document.getElementById("myBar").style.width = scrolled + "%";
}

document.body.scrollTop || document.documentElement.scrollTop khoảng cách đã được scroll tính từ top đến vị trí hiện tại.

document.documentElement.scrollHeight-document.documentElement.clientHeight độ cao phần tử được scroll trừ cho độ cao màn hình người dùng.

Các bạn chạy file này và test kết quả nha, có problem gì các bạn comment bên dưới mình sẽ giải đáp trong vòng 24h. Chúc bạn học tốt.