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

این روند با نوارهای کناری شروع شد، اما جایی که واقعاً محبوبیت آن افزایش یافته است، هدرها است. چرا؟ از آنجا که هدرها معمولاً حاوی ناوبری هستند و پیمایش مداوم در بین کاربران محبوب است.

در این آموزش ما یک هدر ایجاد می کنیم که به بالای نمای پورت می چسبد، اما برای اینکه با محتوا تداخل نداشته باشد، زمانی که کاربر به پایین پیمایش می کند، آن را به حداقل می رسانیم. page.

وقتی کارمان تمام شد به این شکل خواهد بود:

اگر می خواهید کد را دنبال کنید، می توانید آن را از اینجا دانلود کنید.

HTML

HTML برای مثال ما واقعا ساده است، تنها چیزی که نیاز داریم یک است h1 داخل a سرتیتر. در زیر آن تصویری برای اجبار داریم page اسکرول کنیم تا بتوانیم اثر را آزمایش کنیم.

<header><h1>Sticky Header</h1></header>
<img src="https://www.webdesignerdepot.com/2014/05/how-to-create-an-animated-sticky-header-with-css3-and-jquery/large-image.jpg" width="782" height="2000" alt="Big Image" />

جی کوئری

انتقال CSS بهترین راه برای مدیریت بخش انیمیشن از هدر چسبنده ما است. تنها چیزی که ما از jQuery استفاده می کنیم، تشخیص موقعیت اسکرول پنجره است.

هنگامی که موقعیت اسکرول پنجره بزرگتر از 1 است – به این معنی که کاربر به سمت پایین اسکرول کرده است – می خواهیم کلاس ‘sticky’ را به آن اضافه کنیم. سرتیتر; در غیر این صورت می خواهیم آن را حذف کنیم (اگر وجود دارد).

این به این معنی است که ما می‌توانیم به هدر استایل دهیم روی آیا کلاس ‘sticky’ اعمال می شود.

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

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

CSS

از CSS ما برای استایل دادن به دو حالت مختلف، حالت پیش‌فرض و حالت چسبنده استفاده می‌شود. و به انتقال بین دو دولت.

برای شروع، اجازه دهید چند سبک ساده که ظاهر هدر را بهبود می بخشد اضافه کنیم:

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’ اعمال می شود، و اکنون می توانیم هدر را به گونه ای متفاوت استایل دهید تا اولویت جدید را منعکس کند. روی را page. ما همچنین موقعیت را روی ثابت قرار دادیم، به طوری که موقعیت یابی را در اواسط اسکرول تغییر نمی دهیم.

چندین کار وجود دارد که می‌خواهیم انجام دهیم: اول، می‌خواهیم اندازه را تغییر دهیم تا فضای صفحه نمایش کمتری مصرف شود. ما همچنین می خواهیم رنگ را تغییر دهیم و به سمت چپ تراز کنیم تا از نظر بصری زیاد تداخل نداشته باشد:

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

علاوه بر این، کد به خوبی کاهش می یابد، بنابراین واقعاً هیچ نقطه ضعفی برای پیاده سازی وجود ندارد.