illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید میانگین رضایت دانشجویان سون لرن از دوره ها، بیش از 94% می باشد!

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

0 1238 ۲۲ بهمن ۹۳

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

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

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

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

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها اولین دیدگاه این مطلب را ارسال کنید.

ارسال دیدگاه

ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

:: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
عضویت/ ورود سریع با :
در حال اتصال ...

ورود به سایت

ورود سریع با :
در حال اتصال ...

جستجو در سون لرن

عبارت :
7LearnTelegram