أوقف اختفاء روابط الـ anchor خلف الـ header الثابت
هل يبتلع الـ navbar الثابت أعلى كل قسم تقفز إليه؟ خاصية CSS واحدة تحل المشكلة بشكل صحيح — بلا padding hacks ولا JavaScript.
هذه مشكلة يواجهها تقريبًا كل موقع. تبني صفحة فيها navbar تربط بأقسام أسفلها — #about و#work و#contact — باستخدام الـ IDs. تضغط على رابط فتتمرر الصفحة إلى القسم. جميل.
ثم تجعل الـ navbar position: fixed. الآن عندما تقفز إلى قسم، يغطي الـ navbar الثابت أعلاه: يمرر المتصفح الـ anchor إلى أعلى الـ viewport تمامًا، حيث يجلس الـ header، فيختفي العنوان خلفه.
الحيلة التي يلجأ إليها الجميع
الحل المعتاد هو إضافة padding لكل قسم بارتفاع الـ header باستخدام padding-block، أو إضافة عنصر إزاحة غير مرئي. ينجح ذلك، لكنه يلوث الـ layout بمسافات وجودها الوحيد هو التعويض عن التمرير.
الحل الحقيقي
توجد خاصية مصممة لهذا الغرض بالذات: scroll-margin-block. اضبطها أكبر قليلًا من ارتفاع الـ navbar فيترك المتصفح هذا القدر من المساحة كلما مرّر عنصرًا إلى مجال الرؤية.
section[id] {
scroll-margin-block: 6rem; /* a touch more than the header height */
}هذا كل شيء. لا padding في الـ layout، ولا scroll listeners في JavaScript، ولا أرقام سحرية موزعة على المكونات. يستقر الـ anchor أسفل الـ header في كل مرة.
دعم المتصفحات ممتاز — يمكنك استخدامها اليوم دون تردد. أحتفظ بمستودع demo صغير لها على github.com/fadyehabamer/scroll-margin-block.
بقلم فادي إيهاب عامر
راسلني على واتسابتابع القراءة
التصميم بالثيمات دون خطوة بناء: كيف يستخدم NYX الدالة color-mix()
بنيت NYX، إطار مكونات بلا أي اعتماديات، بحيث يمكن إعادة ضبط ثيم كامل من حفنة custom properties — بلا Sass ولا إعادة تجميع، مباشرة في المتصفح.
ما علّمني إياه بناء OTP Input عن المكونات المتحكَّم بها
التقدم التلقائي واللصق والـ backspace تبدو بسيطة حتى تبنيها — إليك دروس الـ controlled input التي ترافقني في كل نموذج أشحنه.