Πώς να δημιουργήσετε: δείκτη κύλισης

Πώς να δημιουργήσετε έναν δείκτη κύλισης

Πρώτο Βήμα - Προσθήκη HTML:

<div class="header">
  <h2>Απόδειξη Κύλισης</h2>
  <div class="progress-container">
    <div class="progress-bar" id="myBar"></div>
  </div>
</div>
<div>content...</div>

Δεύτερο Βήμα - Προσθήκη CSS:

/* Ρύθμιση στυλ κεφαλίδας: σταθερή θέση (μένει πάντα στην κορυφή) */
.header {
  position: fixed;
  top: 0;
  z-index: 1;
  πλάτος: 100%;
  χρώμα φόντου: #f1f1f1;
}
/* Κουτί προοδευτικής μπαρας (γκρίζο φόντο) */
.progress-container {
  πλάτος: 100%;
  ύψος: 8px;
  χρώμα φόντου: #ccc;
}
/* Προοδευτική μπάρα (απόδειξη κύλισης) */
.progress-bar {
  ύψος: 8px;
  χρώμα φόντου: #04AA6D;
  πλάτος: 0%;
}

Τρίτη Βήμα - Προσθήκη JavaScript:

// Όταν ο χρήστης κινεί την σελίδα, εκτελείται το 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 + "%";
}

Προσπαθήστε το προσωπικά