دستیابی به این تکنیک موثر و قدرتمند بسیار ساده تر از آن چیزی است که انتظار دارید.
در طراحی وب، هدر چسبنده ابزار قدرتمندی است که تجربه کاربر و ناوبری را افزایش می دهد. هنگامی که کاربران صفحه وب را به پایین اسکرول می کنند، یک هدر چسبنده قابل مشاهده باقی می ماند و اطمینان حاصل می کند که پیوندهای ناوبری ضروری همیشه در دسترس هستند. بیایید به پیچیدگی های ساخت هدر چسبنده با استفاده از 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>
این ساختار از یک هدر استفاده می‌کند که حاوی آرم و یک عنصر ناوبری با فهرست نامرتب از پیوندهای پیمایش است. سپس از یک تگ اصلی و چندین تگ بخش برای نمایش هر بخش در صفحه استفاده می کند. در حال حاضر صفحه به شکل زیر است:
پایه گذاری با 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;
}
اکنون صفحه باید به راحتی بین بخش ها حرکت کند:
ارتقای ناوبری وب با هدرهای چسبنده CSS
اضافه کردن یک هدر چسبنده به طراحی وب سایت شما می تواند تجربه کاربری را تا حد زیادی بهبود بخشد. این ویژگی کاربران را به منوی اصلی متصل نگه می‌دارد، برندی ثابت را حفظ می‌کند و ظاهری مدرن به وب‌سایت شما می‌دهد.
با قدرت CSS، ایجاد این افکت ساده و موثر است. روند طراحی وب در طول زمان تغییر می کند، اما هدر چسبنده همیشه برای صنایع مختلف مفید است.