چگونه یک هدر چسبنده با CSS بسازیم

دستیابی به این تکنیک موثر و قدرتمند بسیار ساده تر از آن چیزی است که انتظار دارید.

در طراحی وب، هدر چسبنده ابزار قدرتمندی است که تجربه کاربر و ناوبری را افزایش می دهد. هنگامی که کاربران صفحه وب را به پایین اسکرول می کنند، یک هدر چسبنده قابل مشاهده باقی می ماند و اطمینان حاصل می کند که پیوندهای ناوبری ضروری همیشه در دسترس هستند. بیایید به پیچیدگی های ساخت هدر چسبنده با استفاده از CSS بپردازیم.

هدر چسبنده چیست؟

یک هدر چسبنده در یک مکان در یک صفحه وب باقی می ماند، حتی زمانی که کاربر پیمایش می کند. ویژگی های خاص 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>

این ساختار از یک هدر استفاده می‌کند که حاوی آرم و یک عنصر ناوبری با فهرست نامرتب از پیوندهای پیمایش است. سپس از یک تگ اصلی و چندین تگ بخش برای نمایش هر بخش در صفحه استفاده می کند. در حال حاضر صفحه به شکل زیر است:

مطلب مرتبط: کار با Archives in Go

پایه گذاری با CSS

کد CSS زیر از ویژگی‌های مدل جعبه مانند padding، margin و flexbox برای ایجاد یک طراحی جذاب با ارتفاع برای هر بخش مکان‌نما استفاده می‌کند.

@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;
}

اکنون صفحه باید به شکل زیر باشد:

پیاده سازی Sticky Effect: CSS

در حال حاضر، وقتی صفحه را به پایین اسکرول می کنید، متوجه می شوید که هدر از صفحه خارج می شود. برای رفع این مشکل، از ویژگی موقعیت CSS استفاده کنید و هدر را روی چسبناک قرار دهید.

این ویژگی بسته به موقعیت اسکرول کاربر مانند ترکیبی از موقعیت نسبی و ثابت عمل می کند.

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

تنظیم هدر روی چسبنده تضمین می کند که بدون در نظر گرفتن اسکرول به یک موقعیت در صفحه می چسبد. ویژگی top مشخص می کند که هدر در کجای صفحه قرار گیرد. اکنون با اسکرول کردن صفحه به پایین به دست می آید:

رسیدگی به مسائل بالقوه انباشته

گاهی اوقات، عناصر دیگر در صفحه ممکن است با هدر چسبنده همپوشانی داشته باشند. برای اطمینان از اینکه هدر در بالا باقی می ماند، می توانید ویژگی z-index را اضافه کنید:

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

در نهایت، ویژگی smooth scrolling را به عنصر HTML اضافه کنید تا تجربه کاربری بهتری داشته باشید:

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

اکنون صفحه باید به راحتی بین بخش ها حرکت کند:

مطلب مرتبط: با استفاده از فایل های Markdown صفحات را به وب سایت Angular خود اضافه کنید

ارتقای ناوبری وب با هدرهای چسبنده CSS

اضافه کردن یک هدر چسبنده به طراحی وب سایت شما می تواند تجربه کاربری را تا حد زیادی بهبود بخشد. این ویژگی کاربران را به منوی اصلی متصل نگه می‌دارد، برندی ثابت را حفظ می‌کند و ظاهری مدرن به وب‌سایت شما می‌دهد.

با قدرت CSS، ایجاد این افکت ساده و موثر است. روند طراحی وب در طول زمان تغییر می کند، اما هدر چسبنده همیشه برای صنایع مختلف مفید است.

Tags: برنامه نويسی سی اس اس طراحی وب سایت