ثابت کردن منو در بالای سایت هنگام اسکرول

ثابت کردن منو در بالای سایت هنگام اسکرول

قصد داریم آموزش کاربردی و مفیدی رو خدمتتون ارائه بدیم که به راحتی بتونید منو سایت خود را یا هر المانی دیگری رو که مورد نظر دارید هنگام اسکرول ثابت کنید .
برای شروع شما نیاز دارید که به فایل های سایتتون دسترسی داشته باشید و بتونید بخش هایی چون فوتر و هدر سایت خود را به راحتی تفکیک کنید (البته با کمی تمرین و تکرار می توانید ) و بتونید کلاس و id را در css شناسایی کنید .
خوب بریم سر اصل مطلب ، برای این کار نیاز هست که کدهای ذیل را در هدر یا فوتر سایت کپی پیس کنید و با کمی تغییرات به نتیجه دلخواه خود برسید . کاری که این کدها انجام می دهد این هست که وقتی سایت اسکرول می شود یک کلاس css به صورت اتوماتیک به هر المانی که بخواهید اضافه می کند و وقتی سایت به جایگاه اولش بر می گردد اون کلاس css پاک می شود .

این کد را در هدر و یا ترجیحا در فوتر سایت خود کپی کنید

نکته : کدهای بالا jquey میباشد و از noConflict  در کد استفاده شده است که باعث می شود که هیچ گونه اختلالی در کدهای و کتابخانه های دیگر به وجود نیاید

در کد بالا هر کجا کلاس cg-menu-below. وجود داشته باشد یک کلاس fixed-header هنگامی که صفحه 300px اسکرول شود اضافه می شود

 

خوب دیگر برای ثابت کردن منو باید فقط دو کار دیگر را انجام بدهید

اول : class یا id المان مورد نظر خود را که می خواهید ثابت شود را پیدا کنید و با کلاس cg-menu-below. در بالا عوض کنید (هر کجا cg-menu-below. بود با class یا id مورد نظر تعویض کنید  )

دوم : کدهای css زیر را در فایل css سایت یا در هدر سایت کپی پیس کنید

توجه : باید دقت داشت که اگر کدها در هدر سایت کپی می کنید باید بین دو تگ <style>code </style> قرار بگیرد .

احسان دربندی

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

4 دیدگاه در پست “ثابت کردن منو در بالای سایت هنگام اسکرول

  1. webuser4030

    سلام وقت بخیر. دوست عزیز من یه قالبی از راست چین گرفتم میخوام در این قالب نوار منو هنگام اسکرول ثابت بمونه
    من چوزیشن فیک و زد ایندکس بالا رو دادم حتی عرض 100 درصد هم دادم ولی باز نشد میخواستم همین جای که هست ثابت بمونه هنگام اسکرول
    http://demo.ikwebco.ir/raika/
    پیشاپیش از راهنمای تون ممنونم

    Reply
    1. احسان دربندیاحسان دربندی ( نویسنده مطلب )

      با سلام
      سایت رو برررسی کردم و کد های که در اموزش بالا گذاشته شده است در سایت ندیدم ، حتما طبق آموزش پیش برید بدون مشکل اجرا می شود

      Reply

ارسال دیدگاه

* .ایمیل ادرس شما منتشر نخواهد شد