ساخت هدر چسبنده با 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 فعالیتش رو شروع کرد، در حال حاضر در زمینه ی برنامه نویسی تحت وب و اندروید و شبکه های ارتباطی سیسکو فعالیت میکنه .

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

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