sticky-header : پنهان شدن خودکار header

- visibility ۰ mode_comment

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

sticky

در این روش هدر سایت همیشه نمایان نیست و بصورت اتوماتیک و طی شرایط خاصی مخفی میشه. هدر زمانی مخفی میشه که شما به سمت پایین اسکرول میکنید و یکی از دلایلش این میتونه باشه که ، زمانی که شما به پایین اسکرول میکنید ، بیشتر به محتوا نیاز دارین و هدر هم مخفی میشه تا محتوای بیشتری در دسترستون باشه.

در هر جای صفحه که باشین با کمی اسکرول کردن به سمت بالا ، هدر نمایان میشه. یکدفعه نمایان نمیشه ، به اندازه همون مقداری که به سمت بالا اسکرول میکنید ، به همون مقدار هم ارتفاع هدر نمایان میشه. زمانی که کل ارتفاع header نمایان شد ، به همون بالا میچسبه و تا زمانی که به سمت بالا scroll کنید ، نشون داده میشه. چون همیشه در بالا وجود داره ، به اون هدر چسبنده یا sticky header میگن.

همچنین زمانی دیگه که این هدر نمایان میشه ، موقعی هست که اسکرول شما به پایینترین موقعیت خودش میرسه. در این حالت هم header نمایش داده میشه.

این ابزار بیشتر بدرد سایتهایی میخوره که ارتفاع زیادی دارند و نیازه که کاربران در هر جای سایت که باشن به هدر در همون مکان دسترسی داشته باشن و نیاز نباشه که به بالای صفحه اسکرول کنند.

من کدهای این ابزار رو در اختیارتون قرار میدم و کمی هم در مورد اونا توضیح میدم. توضیح بیشتر فک نکنم نیازی باشه و همین که با نحوه کارکرد اون آشنا باشیم کافیه. این ابزار رو میشه بصورت یک پلاگین برای jquery استفاده کرد.

اول برای مثال یک div با id = wrapper میسازیم که کل محتویات سایتمون رو درون اون قرار بدیم و بعد از اون هم دو div درون اون قرار دادیم ، بصورت زیر :

میبینید که دو div یکی با آی دی content و دیگری با کلاس header قرار دادیم و درون header هم یک تگ h1 قرار دادیم و به اون استایلهای زیر رو نسبت میدیم :

درون id = content هم باید محتویات زیادی قرار بدیم که ارتفاع اون زیاد بشه. مثلا من 10 تا تگ p قرار دادم و استایل زیر رو هم به اونا نسبت دادم :

حالا که ظاهر سایت رو ساختیم ، باید کدهای Javascript رو قرار بدیم. در این مطلب به jquery نیاز داریم. بصورت زیر :

میبینید که کدهارو قرار دادیم و در خط 7 اگر دقت کنید ، المنتهای با کلاس header انتخاب شدن. یعنی هر المنتی که کلاس header رو داشته باشه ، این کدها به اونا اعمال میشه. این ابزار از رویداد scroll استفاده کرده و با استفاده از محاسباتی که انجام داده ، مشخص میکنه که طی چه شرایطی هدر نمایش داده بشه و در چه شرایطی مخفی بشه.

با استفاده از این ابزار میتونین تجربه کاربری خوبی برای سایتتون بوجود بیارین.

برای مطالعه بیشتر میتونین به این لینک مراجعه کنید.

comment دیدگاه کاربران

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.