خانه » بازی » Playstation 2 » نرم افزار شبیه ساز Playstation 2 – بازیهای PS2 در کامپیوتر

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

sticky-menu

قصد داریم آموزش کاربردی و مفیدی رو خدمتتون ارائه بدیم که به راحتی بتونید منو سایت خود را یا هر المانی دیگری رو که مورد نظر دارید هنگام اسکرول ثابت کنید .
برای شروع شما نیاز دارید که به فایل های سایتتون دسترسی داشته باشید و بتونید بخش هایی چون فوتر و هدر سایت خود را به راحتی تفکیک کنید (البته با کمی تمرین و تکرار می توانید ) و بتونید کلاس و 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 هنگامی که صفحه ۳۰۰px اسکرول شود اضافه می شود

 

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

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

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

.fixed-header {
position: fixed;
top: 0;
width: 100%;
z-index: 100;
}

 

ارسال دیدگاه

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *