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

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