يعد تحقيق هذه التقنية الفعالة والقوية أسهل بكثير مما قد تتوقعه.

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

ما استخدام رأس مثبت؟

يظل الرأس الثابت في مكان واحد على صفحة الويب، حتى عندما يقوم المستخدم بالتمرير. خصائص CSS محددة، في المقام الأول الموقف: لزجة، سيساعدك على تحقيق هذا السلوك. تتضمن بعض فوائد وجود رأس ثابت تجربة مستخدم محسنة وسهولة التنقل في موقع الويب.

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

تصميم الرأس: هيكل HTML

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

<body>
<header>
<spanclass="logo">Company Logo 🏠





instagram viewer


span>
<nav>
<ul>
<li><ahref="#home">Homea>li>
<li><ahref="#about">Abouta>li>
<li><ahref="#services">Servicesa>li>
<li><ahref="#contact">Contacta>li>
ul>
nav>
header>
<mainid="home"><h1>Home pageh1>main>
<sectionid="about"><h1>Abouth1>section>
<sectionid="services"><h1>Servicesh1>section>
<sectionid="contact"><h1>Contacth1>section>
body>

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

وضع الأساس باستخدام CSS

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

@import url("https://fonts.googleapis.com/css2?family=Quicksand: wght@600&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}


html { font-size: 62.5%; }


body { font-family: "Quicksand", sans-serif; }


main,
section { height: 100vh; }


.logo { font-size: 3rem; }


main,
header,
section {
display: flex;
align-items: center;
}


main { justify-content: center; }


header {
justify-content: space-between;
padding: 1rem 2rem;
background: #b2babb; 
}


navul {
display: flex;
column-gap: 2rem;
list-style: none;
}


a {
text-decoration: none;
font-size: 2rem;
color: #333;
}


section { justify-content: center; }


#home { background: #2c3e50; }


#about { background: #ccccff; }


#services { background: #f5b7b1; }


#contact { background: #40e0d0; }


h1 {
 font-size: 4rem;
 color: #fff;
}

يجب أن تبدو الصفحة الآن بالشكل التالي:

تنفيذ التأثير اللزج: CSS

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

تعمل هذه الخاصية كمجموعة من الموضع النسبي والثابت، اعتمادًا على موضع التمرير الخاص بالمستخدم.

header {
justify-content: space-between;
padding: 1rem 2rem;
position: sticky;
top: 0;
}

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

معالجة مشكلات التراص المحتملة

في بعض الأحيان، قد تتداخل عناصر أخرى في الصفحة مع الرأس الثابت. لضمان بقاء الرأس في الأعلى، يمكنك إضافة خاصية z-index:

header {
justify-content: space-between;
padding: 1rem 2rem;
position: sticky;
top: 0;
z-index: 9999;
}

وأخيرًا، أضف خاصية التمرير السلس إلى عنصر HTML للحصول على تجربة مستخدم أفضل:

html {
font-size: 62.5%;
scroll-behavior: smooth;
}

يجب الآن أن تنتقل الصفحة بسلاسة بين الأقسام:

رفع مستوى التنقل عبر الويب باستخدام رؤوس CSS الثابتة

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

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