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

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

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

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

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

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

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

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

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

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

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

.navbar-fixed-top {

position: fixed;

right: 0;

left: 0;

z-index: 999;

}

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

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

ضبط نص الصفحة

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

body {

padding-top: 75px;

}

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

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

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

التنقل اسفنجي مع البرنامج النصي AnimatedHeader

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

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

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

.navbar-fixed-top {
position: fixed;
top: 0;
left: 0;
width: 100%;
background: #f6f6f6;
z-index: 999;
height: 90px;
overflow: hidden;
-webkit-transition: height 0.3s;
-moz-transition: height 0.3s;
transition: height 0.3s;
}

.navbar-fixed-top.cbp-af-header-shrink {
height: 75px;
}

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

function scrollPage() {
var sy = scrollY();
if ( sy >= changeHeaderOn ) {
classie.add( header, 'cbp-af-header-shrink' );
}
else {
classie.remove( header, 'cbp-af-header-shrink' );
}
didScroll = false;
}

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

خيار تحديد المواقع الثابت CSS

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

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

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

باستخدام الموقف: لزجة

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

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

.navbar-fixed-top {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

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

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

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

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

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

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

@supports(position:sticky){
  .header{
    position: -webkit-sticky;
    position: sticky;
    top: 0;
  }
}

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

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

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

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

تم نشر هذه المقالة في الأصل في 2 فبراير 2016. وتم آخر تحديث لها في 14 أكتوبر 2018.