ساخت Sticky Menu یا منوی چسبنده با استفاده از جی کوئری و سی اس اس ۳

احتمالا تا کنون به منو های چسبنده یا Sticky Menu ها برخورد کرده اید . با توجه به افزایش ارتفاع وب سایتها به جهت افزایش اطلاعات موجود در صفحات و رایج شدن وب سایتهای تک صفحه ای یا Single Page  استفاده از منو های چسبنده رواج گرفته است . این نوع از منو می تواند دسترسی پذیری وب سایت را در این گونه از وب سایت ها افزایش دهد و باعث گشت و گذار بیشتری توسط مخاطب در وب سایت گردد . البته نوع حرکت و تکنیک استفاده شده نیز میتواند جالب باشد و به جلوه های وب سایت شما بیفزاید .

پلاگین های زیادی برای ساختن Sticky Menu ها نوشته شده اند و مورد استفاده قرار میگیرند . مانند پلاگین های Waypoints و STICKYBETA که به راحتی نیاز شما رو برطرف خواهند کرد . اما خوب از اونجایی که کمی دوست دارم در مورد نحوه کار این پلاگین ها تحقیق کنم تصمیم گرفتم این پلاگین ساده رو خودم تجربه کنم و بنویسم که البته تجربه جالبی بود .

در این سیستم با توجه به میزان اسکرول صفحه به صورت عمودی منو به بالای صفحه میچسبه و در واقع وضعیت position : fixed پیدا میکنه . برای اینکه بتونیم حالت منو رو از وضعیتی که در حالت اولیه و نرمال داره تغییر بدیم نیاز به این هست که متوجه بشیم صفحه چه موقعی با اسکرول به ارتفاع مورد نظر ما میرسه ( این ارتفاع قابل تنظیم خواهد بود ) و در اون لحظه وضعیت باکس منو ( یا هر چیز دیگه ای به غیر از منو ) رو به position : fixed تغییر بدیم . این منو در ابتدا میتونه هر وضعیت دیگه ای به غیر از fixed داشته باشه .

برای تغییر دادن این وضعیت کافیه یک class رو در نقطه بحرانی مورد نظرمون ( ارتفاع تعیین شده ) به منو یا باکس اطراف منو اضافه کنیم . برای تشخیص اینکه چه موقع کاربر با اسکرول به ارتفاع مورد نظر ما خواهد رسید از جی کوئری استفاده خواهیم کرد .

یادتون باشه باید از یک کتابخانه جی کوئری قبل از نوشتن فانکشن و استفاده در وب سایت استفاده کنید .

<script type="text/javascript" src="js/jquery-1.7.1.js"></script>

در جی کوئری با استفاده از scroll event تشخیص خواهیم داد که چه زمانی کاربر اقدام به اسکرول خواهد کرد تا عملیات بعدی رو برنامه ریزی کنیم .

$(window).scroll(function () {

 .....

});

در این مرحله بعد از اینکه از ایونت اسکرول استفاده کردیم و متوجه شدیم چه زمانی کاربر اقدام به اسکرول خواهد کرد سپس باید متوجه بشیم چه زمانی کاربر به ارتفاع مورد نظر ما خواهد رسید ! .
برای این کار از فانکشن scrollTop استفاده خواهیم کرد که به ما مقدار اسکرول شده از بالای مرورگر رو با واحد پیکسل به صورتی عددی بر میگردونه .

خوب ابزارهای لازم در اختیار ما قرار داره کافیه روی این اعداد و ارقام کمی کار کنیم .

ما مقدارهای اندازه ارتفاع اسکرول شده از بالای مرورگر و همچنین مقدار ارتفاع نقطه بحرانی ( که باید با توجه به طرح تعیین کنیم ) از بالای صفحه رو در اختیار داریم .

با استفاده از یک فانکشن و دستور شرطی اقداماتی که روی باکس قراره انجام بدیم رو مشخص کنیم . مقدار اسکرول از بالای صفحه رو که واحدش پیکسل – px – داخل یک متغیر میریزیم به اسم heightScrolled و یک مقدار دیگه برای ارتفاع مورد نظرمون به عنوان نقطه بحرانی برای ایجاد تغییر تعیین کنیم و داخل یک متغیر با نام defaultHeight ذخیره میکنیم . این مقدار کاملا اختیاری هست و با توجه به نوع طرح شما انتخاب میشه .

$(window).scroll(function () {
    var $heightScrolled = $(window).scrollTop();
    var $defaultHeight = 300;

 	 .....

});

این نکته رو فراموش نکنید که نباید زیاد از اسکرول کردن بگزره و بعد این فانکشن اجرا بشه به عبارت دقیقتر این ارتفاع رو خیلی بیشتر از ارتفاع منو نگیرید فقط کمی بیشتر از ارتفاعی که منوی شما قابل رویت هست .

با استفاده از دستورات شرطی حالت های قبل و بعد از رد شدن از نقطه بحرانی رو مشخص خواهیم کرد و کلاس های متناسب با این حالت ها رو به باکس مورد نظرمون خواهیم داد . در مثال ما باکس در دو حالت قبل از رسیدن به ارتفاع مورد نظر و بعد از گذشتن از این ارتفاع از ID #menu استفاده میکنه . نکته اینجاست که بعد از رسیدن به این نقطه کلاس sticky به باکس #header که در برگیرنده #menu هست اضافه خواهد شد و به وسیله این کلاس تغییرات لازم در #menu رو ایجاد خواهیم کرد .

$(window).scroll(function () {
    var $heightScrolled = $(window).scrollTop();
    var $defaultHeight = 300;

    if ( $heightScrolled < $defaultHeight )
    {
        $('#header').removeClass("sticky")
        }
    else {
        $('#header').addClass("sticky")
        }

});

خوب با توجه به توضیحاتی که داده شد فانکشن ما تقریبا کامل شده . حالا برای اینکه هنگام تعویض حالت از نوع پوزیشن قبلی به جدید افکت زیبایی داشته باشیم از سی اس اس ۳ – CSS3 استفاده خواهیم کرد .
برای ایجاد افکت کافیه ار خصوصیت transition استفاده کنیم تا تغییر حالت به نرمی صورت بگیره .

قبل از نقطه بحرانی

</pre>
<div id="header">
<div id="menu">
 ........</div>
</div>
<pre>

بعد از رسیدن به نقطه بحرانی

</pre>
<div id="header" class="sticky">
<div id="menu">
 .........</div>
</div>
<pre>

در حالتی که #menu در زیر شاخه کلاس sticky قرار بگیره خصوصیت پوزیشن به fixed تغییر پیدا خواهد کرد .

#menu {

	-moz-transition:all 0.5s; /* Firefox 4 */
	-webkit-transition:all 0.5s; /* Safari and Chrome */
	-o-transition:all 0.5s; /* Opera */
	transition:all 0.5s;

    }

.sticky #menu {

	position:fixed;
    top : 0;
    width :100%;
    z-index:9999;

}

به این نکات توجه کیند که فراموش نکنید مقدار top رو تعیین کنید و اینکه width رو به ۱۰۰% یا مقدارهای مشابه تغییر بدید و از z-index برای تعیین موقعیت لایه ای باکس استفاده کنید . در این کلاسها فقط مواردی که ما به اونها نیاز داریم رو نوشتم و مابقی موارد و ظاهر منو ها بستگی به طراحی شما خواهد داشت . البته تقریبا در مورد تمام مواردی که در این آموزش توضیح داده شد در وب تارگت مطالب وجود داره . امیدوارم مورد استفاده قرار بگیره .