كيفية إنشاء: مؤشر التمرير

كيفية إنشاء مؤشر التمرير

الخطوة الأولى - إضافة HTML:

<div class="header">
  <h2>مؤشر التمرير</h2>
  <div class="progress-container">
    <div class="progress-bar" id="myBar"></div>
  </div>
</div>
<div>محتوى...</div>

الخطوة الثانية - إضافة CSS:

/* تعيين نمط العنوان: وضع ثابت (يبقى دائمًا في الأعلى) */
.header {
  الوضع: ثابت;
  الجزء العلوي: 0;
  مستوى التسلسل: 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 + "%";
}

تجربة بنفسك