تالار میدوری

حتما تا کنون وارد سايت هايی شده ايد که هنگامی که اسکرول را به پايين می کشيد منوی سايت در بالاترين قسمت سايت همراه با شما به پايين کشيده می شود . در اين مطلب قصد دارم به شما آموزش دهم که چگونه چنين منويی با استفاده از CSS و jQuery برای سايت خود ايجاد کنيد . ابتدا تصویر های ضمیمه را ببینید یکی در حالت عادی و دیگری در حرکت اسکرول به پایین .

توجه : این یک ایده اولیه است و نیاز به کار بیشتر دارد و با کمی تغییر و زیبا سازی که توسط شما انجام می شود به کمال می رسد .
اگر علاقه مند شدید پس دست به کار شوید .
گام یکم : کد HTML زیر را در header ایجاد کنید


گام دوم : در گلوبال سی اس اس , کد css برای ايجاد منو را به صورت زير ايجاد می کنيم.


در کد CSS تمامی موارد به صورت معمول می باشند . تنها class متفاوت ps-nav می باشد که تعيين می کند منو در وضعيت fixed در بالای سايت نمايش داده شود . اين کد با استفاده از jQuery فعال و غير فعال می شود .

گام سوم : کد جاوای زير را در ابتدای بخش header جايگذاری کنید .


در اين کد مشخص می کنيم که اگر اسکرول سايت بيشتر از 150 پيکسل پايين آورده شد , class مورد نظر ما يعنی ps-nav فعال شود . و در غير اينصورت غير فعال و حذف شود .

گام چهارم : فراموش نکنيد که کد زير را حتما در بخش headerinclude سايت خود فراخوانی کنيد . ( با وضعیت گوگل در ایران بهتر است فایل زیر را دانلود و در هاست خودتان آپلود کنید )

کار تمام است و باقی کارها با شماست .