פס התקדמות קריאה

החישוב הוא ביחס לגובה שאפשר לגלול ולא לגובה המסמך. ההפרש בין השניים הוא בדיוק מסך אחד, ובלעדיו הפס נעצר לפני הסוף והקורא מרגיש שהמאמר לא נגמר. פס התקדמות קריאה הוא רכיב מתוך רכיבים של כליקס. מה שמורידים הוא רכיב שלם, גם כ-HTML עצמאי וגם כרכיב React. אין ספרייה חיצונית, אין שלב בנייה, ואם כליקס ייעלם מחר הקוד ימשיך לעבוד. מתאים לעמודים ולמסמכים שעוסקים בבלוג, ניווט ובלי ספריות. באותה סדרה יש גם שאלות נפוצות, ציר תהליך וקרוסלת המלצות.

רכיב · בלוג · ניווט · בלי ספריות

<!-- פס התקדמות קריאה -->
<style>
  .klix-progress { position: fixed; inset-inline: 0; top: 0; z-index: 50;
    height: 3px; background: rgba(255,255,255,.1) }
  .klix-progress span { display: block; height: 100%; width: 0;
    background: linear-gradient(to left, #818cf8, #38bdf8) }
</style>

<div class="klix-progress" id="klix-progress" role="progressbar"
     aria-label="התקדמות קריאה" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
  <span></span>
</div>

<script>
(function () {
  var bar = document.getElementById('klix-progress');
  if (!bar) return;
  var fill = bar.firstElementChild;

  function update() {
    var doc = document.documentElement;
    // הגובה הניתן לגלילה, לא גובה המסמך — אחרת הפס לעולם לא מגיע ל-100%
    var max = doc.scrollHeight - window.innerHeight;
    var pct = max > 0 ? Math.min(100, (window.scrollY / max) * 100) : 0;
    fill.style.width = pct + '%';
    bar.setAttribute('aria-valuenow', Math.round(pct));
  }

  update();
  window.addEventListener('scroll', update, { passive: true });
  window.addEventListener('resize', update);
})();
</script>