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

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

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

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

<script data-cfasync="false" type="text/javascript" src="https://code.jquery.com/jquery.min.js"></script>
<script>
    var $a= $.noConflict(true);
    $a(window).scroll(function(){
        if ($a(window).scrollTop() >= 300) {
            $a('.cg-menu-below').addClass('fixed-header');
        }
        else {
            $a('.cg-menu-below').removeClass('fixed-header');
        }
    });
</script>
نکته : کدهای بالا jquey میباشد و از noConflict  در کد استفاده شده است که باعث می شود که هیچ گونه اختلالی در کدهای و کتابخانه های دیگر به وجود نیاید در کد بالا هر کجا کلاس cg-menu-below. وجود داشته باشد یک کلاس fixed-header هنگامی که صفحه 300px اسکرول شود اضافه می شود

 

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

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

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

.fixed-header {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 100;
}
توجه : باید دقت داشت که اگر کدها در هدر سایت کپی می کنید باید بین دو تگ <style>code </style> قرار بگیرد .

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

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

  3. webuser4030

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

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

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

      Reply
    2. مهران

      درود
      سایتتون ظاهر خوبی داره. ساده, همه موارد سر جای خودش و در عین سادگی؛ شیک.
      موفق باشی دوست محترمم.

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

      سلام و درود
      چک شد ، با موفقیت نصب کرده اید
      موفق باشید

      Reply
  5. مهران

    سلام،
    خیلی عالی بود. ممنون از شما.
    فقط یک پرسش!
    این قسمت: “($a(window).scrollTop() >= 300)”
    300 رو متوجه نشدم جریانش چیه. اگر بشه 200, 100, 600 یا …. چه اتفاقی می افته؟!

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

      سلام و درود
      یعنی هر وقت صفحه 300px از بالا اسکرول شد منو رو ثابت کن اگر این عدد رو کم یا زیاد کنید نتیجه مشخص است
      موفق باشید

      Reply

ارسال دیدگاه

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