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