كيفية بناء رأس مثبت باستخدام CSS

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

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





فيديو MUO لهذا اليوم قم بالتمرير للمتابعة مع المحتوى

ما هو الرأس اللزج؟

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



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

تتضمن بعض فوائد وجود رأس ثابت تجربة مستخدم محسنة وسهولة التنقل في موقع الويب.





كيفية جعل الكمبيوتر المحمول لا ينام عند إغلاقه

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

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

 <body> 
   <header> 
     <span class="logo">Company Logo 🏠</span> 
     <nav> 
       <ul> 
         <li><a href="#home">Home</a></li> 
         <li><a href="#about">About</a></li> 
         <li><a href="#services">Services</a></li> 
         <li><a href="#contact">Contact</a></li> 
       </ul> 
     </nav> 
   </header> 
   <main id="home"><h1>Home page</h1></main> 
   <section id="about"><h1>About</h1></section> 
   <section id="services"><h1>Services</h1></section> 
   <section id="contact"><h1>Contact</h1></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;  
} 
 
nav ul { 
  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 الثابتة

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

كيفية وضع التطبيقات على بطاقة sd

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