كيفية إنشاء رأس موقع ويب مثبت

أصبحت رؤوس مواقع الويب التي تظل في مكانها عند تمرير المستخدم عنصر تصميم شائعًا جدًا. إنها تسمح للمستخدم بالوصول بسهولة إلى التنقل دون الحاجة إلى التمرير لأعلى في كل مرة يريد فيها اختيار صفحة أو خيار مختلف.

غالبًا ما يُطلق على العناصر التي تحتوي على هذه الوظيفة اسم "ثابتة" لأنها تظل مع المستخدم ، وتظل مرئية أثناء تنقلها عبر موقع الويب. عندما يصل المستخدم لأول مرة إلى موقع الويب ، ستكون العناصر في موضع البداية ، ولكن بعد ذلك سيظل العنوان الثابت في نفس المكان.

نظرًا لأن التنقل هو أحد أهم عناصر موقع الويب ، فإن اتباع هذا النهج يساعد في جعل التنقل أكثر سهولة. يسمح وجود التنقل في مكانه بالتدفق السهل للمستخدم أثناء تنقله عبر محتوى موقع الويب ، وهو أمر مهم للغاية.

تساعد عناصر التنقل الثابتة في إنشاء تدفق مستخدم سهل بينما يتنقل الأشخاص عبر موقع الويب الخاص بك.

ما الذي يجعلها لزجة؟

تحديد المواقع الثابتة هو عنصر أساسي لجعل التنقل في مكانه. يتم وضع عنصر الموضع الثابت هذا بالنسبة إلى إطار العرض أو نافذة المتصفح نفسها. نظرًا لأن منفذ العرض لا يتغير عند تمرير الموقع ، سيبقى هذا العنصر الثابت الموضع في نفس المكان عند تمرير الصفحة.

ملاحظة: لا تجرب هذا على موقع Live الخاص بك

تذكر: يجب عليك عدم تغيير الكود مباشرة على موقعك المباشر لضمان عدم تعطل أي شيء. سيساعدك تطبيق التطوير المحلي المجاني الخاص بنا ، Local ، في إعداد بيئة اختبار حيث يمكنك متابعة هذا البرنامج التعليمي بأمان.

كيف نحصل على الملاحة للبقاء في مكان واحد؟

لا يمكن أن يكون جعل التنقل ثابتًا أسهل ؛ لقد تم فقط باستخدام تصميم CSS. يبدو بشكل أساسي شيئًا مثل هذا:

 [المغلق]

.navbar-fixed-top {

الموقف: ثابت ؛

اليمين: 0؛

اليسار: 0؛

مؤشر z: 999 ؛

}

[/ css]

بغض النظر عن طول صفحتك ، أو عدد مرات التمرير لأعلى ولأسفل ، فإن التنقل سيكون "عالقًا" في أعلى الصفحة. تمت إضافة فئة تسمى .navbar-fixed-top إلى قائمة التنقل التي تنشئ موضع التنقل. لقد أضفت هذه الفئة إلى علامة التنقل. يتم تعيين الموضع على ثابت ويضمن إضافة الموضع الأيسر والأيمن أن الموضع صحيح ويشغل العرض الكامل للصفحة.

ضع في اعتبارك أنه في أي وقت يتم فيه تطبيق هذه الفئة ، فإنها ستنشئ الموضع الثابت للعنصر. على الأرجح سيتم تطبيق هذه الفئة مرة واحدة فقط ، وإلا فسيكون هناك العديد من عناصر الصفحة التي تتصرف بنفس الطريقة في نفس المكان ، مما يؤدي إلى حدوث فوضى مختلطة.

اعتبار آخر مهم هو z-index. نظرًا لأننا نريد أن يكون التنقل مرئيًا دائمًا ، فنحن بحاجة إلى التأكد من عدم تداخله مع العناصر الأخرى. عندما نشير إلى z-index ، فإننا نتحدث عن خاصية CSS التي تحدد ترتيب المكدس لعناصر محددة. دائمًا ما يكون العنصر الذي يحتوي على ترتيب مكدس أكبر أمام عنصر آخر بترتيب مكدس أقل. الرقم 999 هو رقم كبير ، مما يجعله رهانًا آمنًا للملاحة.

ضبط نص الصفحة

نظرًا لأن التنقل الآن في موضع ثابت ، فإنه سيغطي جزءًا من المحتوى في الأعلى. هناك حل بسيط لهذا. ستؤدي إضافة الحشو إلى الجزء العلوي من النص إلى دفع الصفحة لأسفل ، لذلك لن يتم تغطية المحتوى الموجود في الجزء العلوي بالرأس عند وصول المستخدم إلى الصفحة.
يمكنك إضافة المساحة المتروكة إلى النص في ملف CSS الخاص بك:

 [المغلق]

جسم {

أعلى الحشو: 75 بكسل ؛

}

[/ css]

ضع في اعتبارك أن الحشو الخاص بك قد يكون أكبر أو أصغر اعتمادًا على مدى ثخانة الرأس الثابت.

جعل الرأس اللزج اسفنجي

من الشائع العثور على رأس يصبح أرق عندما يتخطى المستخدم نقطة معينة ، مما يجعله يبدو اسفنجيًا. عندما يتناقص حجم التنقل ، فإنه يساعد على منح المستخدم مساحة أكبر لمشاهدة محتوى موقع الويب الرئيسي. هذا مفيد بشكل خاص على الأجهزة الصغيرة. سنستخدم مزيجًا من CSS و JavaScript لتحقيق ذلك.

ملاحة اسفنجي مع AnimatedHeader Script

لإضافة رأس متحرك يغير حجمه عند التمرير ، هناك حل رائع وخفيف الوزن لجعل التنقل اسفنجيًا. يطلق عليه AnimatedHeader. لديها ترخيص من معهد ماساتشوستس للتكنولوجيا ، لذلك يمكن استخدامها في المشاريع الشخصية أو التجارية. للحصول على هذه الملفات ، تحقق من AnimatedHeader على GitHub.

CSS الأساسي للملاحة

دعنا نلقي نظرة على نمطين مهمين من أنماط CSS. ربما يبدو الأول مألوفًا لك ، .navbar-fixed-top الذي يحدد الارتفاع والعرض والموضع الثابت للتنقل الثابت. أدناه ، يمكنك أن ترى أن هناك فئة أخرى مضافة تحدد ارتفاع 75 بكسل. هذا هو الحجم "مسحوق".

 [المغلق]

.navbar-fixed-top {
الموقف: ثابت ؛
أعلى: 0؛
اليسار: 0؛
العرض: 100٪؛
الخلفية: # f6f6f6 ؛
مؤشر z: 999 ؛
الارتفاع: 90 بكسل ؛
إخفاء الفائض؛
- الانتقال إلى مجموعة الويب: الارتفاع 0.3 ثانية ؛
-موز-الانتقال: ارتفاع 0.3 ثانية ؛
الانتقال: الارتفاع 0.3 ثانية ؛
}

.navbar-fixed-top.cbp-af-header-shrink {
الارتفاع: 75 بكسل ؛
}

[/ css]

لتغيير الحجم ، يتم استخدام JavaScript لإضافة فئة .cpb-af-header-shrink . دعنا نلقي نظرة على جزء النص الذي يجعل هذا يحدث:

 [جافا سكريبت]

وظيفة scrollPage () {
var sy = scrollY () ؛
إذا (sy & amp؛ amp؛ amp؛ amp؛ gt؛ = changeHeaderOn) {
classie.add (header، 'cbp-af-header-shrink') ؛
}
آخر {
classie.remove (header، 'cbp-af-header-shrink') ؛
}
didScroll = خطأ ؛
}

[/ جافا سكريبت]

فقط للتذكير ، هناك المزيد للبرنامج النصي ، لذا تأكد من تنزيل الكود المصدري حتى يكون لديك جميع المكونات. كما ترى ، بعد مرور المستخدم عبر نقطة معينة ، تتم إضافة فئة .cpb-af-header-shrink . إذا انتقل المستخدم إلى أعلى الصفحة احتياطيًا ، فسيتم حذف هذه الفئة.

خيار الوضع الثابت CSS

هناك أيضًا خيار قد يكون أقل صعوبة. اعتمادًا على دعم المتصفح الذي تصممه ، position: sticky; يجعل إنشاء رأس مثبت أمرًا بسيطًا للغاية. دعم المستعرض ليس سيئًا ، لكنه ليس عالميًا أيضًا. عندما تعلن عن لزجة ، يمكن استخدام البادئات. تحقق من هل يمكنني استخدام لمزيد من التفاصيل.

هناك طريقة بسيطة لوصف المواقع اللزجة وهي أنها مزيج من التموضع النسبي والثابت. أظن أنك صادفتك وضعًا لزجًا إلى حد ما. نحن نتحدث عن العناوين هنا ، ولكنها مفيدة أيضًا لأي عنصر واجهة مستخدم تريده أن يكون "ثابتًا" أثناء قيام المستخدمين بالتمرير. يرون أنه "يتعطل" عندما يصل العنصر إلى مسافة معينة من حافة منفذ العرض.

يتم التعامل مع العنصر على أنه موضع نسبي حتى يصل إلى نقطة معينة ثم يتم "إصلاحه". تم التصريح عن هذه النقطة باستخدام CSS. تكون "النقطة" أساسًا عندما تحدد أعلى أو أسفل أو يسارًا أو يمينًا ، كما تفعل مع تحديد الموضع المطلق. تحتاج إلى التحديد بحيث يكون للعنصر شيء "يلتزم" به.

باستخدام الموقف: مثبت

إنه سهل الاستخدام. عدد قليل من إعلانات CSS وكنت قادرًا على الحصول على رأس ثابت. فيما يلي ثلاث خطوات بسيطة:

1. ابحث عن النمط الصحيح حتى تتمكن من إعلان العنصر على أنه لزج باستخدام position:sticky; (لا تنس بادئات المتصفح مثل position: -webkit-sticky; ).
2. اختر "الحافة اللاصقة" (أعلى ، يمين ، أسفل ، أو يسار) للعنصر الذي "يلتزم" به.
3. قم بتعريف المسافة من "الحافة اللاصقة" ، أي 10 بكسل للرأس الذي يصبح لزجًا عندما يكون على بعد 10 بكسل من منطقة التمرير.

 [المغلق]

.navbar-fixed-top {
  الموقف: -webkit- لزجة.
  الموقف: لزج.
  أعلى: 0؛
}

[/ css] 

لا أريد أي مسافة بين الرأس اللاصق وإطار العرض ، لذا فهي 0 بكسل من الأعلى. يمكنك مشاهدة هذا المثال على Codepen.

كن على دراية بحالات الفائض اللزجة هذه

التوافق الفائض

إنه رائع ، لكنه ليس مثاليًا. هناك بعض القيود. يمكن أن يكون الفائض في بعض الأحيان غير متوقع بعض الشيء. من الأفضل الابتعاد عن أنواع معينة من الفائض على عنصر أصلي بشيء يحتاج إلى position: sticky . يمكن أن تكون هناك مشكلات في التدفق التلقائي أو التمرير أو المخفي.

دعم متصفح محدود

دعم المتصفح محدود ، لذا فإن استخدام قاعدة supports لاكتشاف ما إذا كان المستعرض الحالي يدعم تحديد المواقع الثابتة يعد خيارًا أم لا. يشبه:

 [المغلق]

supports (position: sticky) {
  .header {
    الموقف: -webkit- لزجة.
    الموقف: لزج.
    أعلى: 0؛
  }
}

[/ css]

من المهم التفكير فيما إذا كان الوضع اللزج ضروريًا للغاية. إذا كان الأمر كذلك ، فيمكن استخدام نهج تحديد المواقع الثابت. إذا لم يكن ذلك ضروريًا تمامًا ، أو إذا لم يكن دعم المتصفح مصدر قلق ، فسيكون تنفيذ النهج الثابت أسهل.

قد يبدو الأمر معقدًا في البداية ، ولكن لا يوجد سبب للوقوع في شبق الملاحة ؛ من السهل نسبيًا جعل التنقل الخاص بك لزجًا وهادئًا. باستخدام بعض المواقع الثابتة البسيطة في CSS ، يمكنك بسهولة إنشاء رأس موقع ويب ثابت. باستخدام بعض JavaScript البسيط ، يمكن تحسين التنقل الثابت عن طريق الضغط على ارتفاع منخفض ، مما يمنح المستخدمين مساحة أكبر لعرض محتوى موقع الويب.

لا تحاول ذلك على موقعك المباشر

قم بإنشاء رأس موقع ويب مثبت لمواقعك المستضافة على WP Engine على Local! تعرف على المزيد وقم بتنزيله مجانًا هنا!