تثبيت الشريط العلوي أثناء التمرير | شريط التنقل الأفقي في لغة CSS

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

في المقالات والدروس الطويلة، يختفي الشريط الأفقي العادي أعلى الشاشة بمجرد التمرير للأسفل. ويمنحك تطبيق position: sticky مع top: 0 وطبقة z-index: 100 على العنصر .nav-bar حلاً ذكياً ومريحاً:

يبقى الشريط في موضعه الطبيعي أسفل لافتة الترحيب العلوية دون الحاجة إلى حجز حشوة علوية يدوية على body.
وما إن يلامس طرفه العلوي حافة النافذة عند top: 0 أثناء التمرير حتى يلتصق بأعلى الشاشة، بينما تمر فقرات المحتوى من تحته بنظافة بفضل z-index: 100 والخلفية اللونية المصمتة.

الصف 2 كود برمجي

CSS

.nav-bar {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: #1d172b;
}
.nav-item-end {
  float: right;
}

جرّب بنفسك

الصف 3 ملاحظة هامة

Sticky Top Navigation Bar تثبيت الشريط العلوي أثناء التمرير

شرح صفوف ومحتوى الفقرة

جميع فقرات هذا الدرس (شريط التنقل الأفقي في لغة CSS)