ساخت هدر چسبنده با CSS3 و jQuery

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

کد HTML

قطعه کد HTML برای این مثال بسیار ساده میباشد، یک تگ Header داریم که شامل یک المنت میباشد و همچنین یک تگ img داریم برای اینکه صفحه ما بتواند اسکرول شود.

کد HTML:

---

<header><h1>Sticky Header</h1></header>
<img src="http://img.majidonline.com/pic/316212/stickyheader.jpg" width="782" height="2000" alt="Big Image" />

---

کد jQuery

بهترین راه برای ایجاد انیمیشن در هدر استفاده از transition در css میباشد و از jQuery تنها برای تشخیص اسکرول صفحه استفاده میکنیم. زمانی که مقدار اسکرول صفحه بیشتر از 1 باشد یعنی صفحه اسکرول شده است و بنابراین باید کلاس sticky را به هدر اضافه کنیم در غیر این صورت باید کلاس sticky را از هدر حذف کنیم.

کد:

---

$(window).scroll(function() {
if ($(this).scrollTop() > 1){ 
    $('header').addClass("sticky");
  }
  else{
    $('header').removeClass("sticky");
  }
});

---

باید توجه کنیم که درصورت غیرفعال بودن جاوا اسکریپت در صفحه هدر به خوبی کار خواهد کرد و استایل هدر در حالت non-sticky باقی خواهد ماند.کد CSS

کد CSS باید دو حالت را در بر بگیرد، حالت دیفالت و حالت sticky و transition بین دو وضعیت،
برای شروع تعدادی استایل به هدر اضافه میکنیم تا ظاهر زیباتری پیدا کند :

کد:

---

header{
  position: fixed;
  width: 100%;
  text-align: center;
  font-size: 72px;
  line-height: 108px;
  height: 108px;
  background: #335C7D;
  color: #fff;
  font-family: 'PT Sans', sans-serif;
}

---

زمانی که کاربر صفحه را اسکرول کرد باید کلاس sticky فراخوانی شود، در این قطعه کد ارتفاع هدر را کم میکنیم و همچنین جهت دهی متنها را به سمت چپ قرار میدهیم:

کد:

---

header.sticky {
  font-size: 24px;
  line-height: 48px;
  height: 48px;
  background: #efc47D;
  text-align: left;
  padding-left: 20px;
}

---

کدهایی که در بالا نوشته شد میتوانند توسط شما به هر صورتی که نیاز دارید تغییر پیدا کنند.
حالا باید هدر را انیمیت کنیم، تنها چیزی که نیاز داریم اضافه کردن قطعه کد زیر به هدر است :transition: all 0.4s ease;

نتیجه گیری

ساخت منوی چسبنده با CSS3 و جابجایی بین کلاس ها با jQuery در قطعه کدهای بالا به صورت ساده و خلاصه بیان شده اند، استفاده از منوهای چسبنده به سایت شما ظاهری زیبا و تجربه کاربری خوبی می بخشند، همچنین زمانی که کاربران نیاز دارند محتوای سایت شما را بخوانند اگر هدر بزرگی دارید بهتر است آن را کوچک کنید تا کاربران دچار مشکل نشوند.

خوب بود کاش نمونه هم میذاشتید