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

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

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

کد HTML

قطعه کد HTML برای این مثال بسیار ساده میباشد، یک تگ Header داریم که شامل یک المنت میباشد و همچنین یک تگ img داریم برای اینکه صفحه ما بتواند اسکرول شود.
<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 در قطعه کدهای بالا به صورت ساده و خلاصه بیان شده اند، استفاده از منوهای چسبنده به سایت شما ظاهری زیبا و تجربه کاربری خوبی می بخشند، همچنین زمانی که کاربران نیاز دارند محتوای سایت شما را بخوانند اگر هدر بزرگی دارید بهتر است آن را کوچک کنید تا کاربران دچار مشکل نشوند.

محمد یه دانشجوی فناوری اطلاعات هست که از سال 92 فعالیتش رو شروع کرد، در حال حاضر در زمینه ی برنامه نویسی تحت وب و اندروید و شبکه های ارتباطی سیسکو فعالیت میکنه .

نظرات و سوالات کاربران

ارسال پاسخ عباس
عباس
جمعه ۲۰ فروردین ۱۳۹۵ ۲۲:۰۲
با سلام
واقعا سایت خوبی دارین
من مبتدی هستم میشه خواهش کنم دقیق بگید با این کدها چیکار کنیم
منظورم اینه که دقیقا کجا در قالب بگذاریم