ساخت منوی چسبنده یا sticky menu به کمک css و jquery

ساعت : ۱۹:۴۴

تاریخ : ۱ دی ۱۳۹۷

چطور به کمک CSS و jQuery یک منوی چسبنده sticky menu بسازیم؟

حتما تا حالا سایت هایی رو دیدید که وقتی اسکرول می کنید تا سایر مطالب سایت رو ببینید ، منوی سایت در قسمت بالا ثابت میمونه و هر چقدر شما اسکرول کنید باز منو در بالای سایت ، ثابت و قابل مشاهده است.

به این منو ها منوی چسبنده یا sticky menu میگن که تو این مقاله میخوام بهتون یاد بدم تا منوی سایتتون رو به کمک css یا jquery چسبنده کنید.

ساخت منوی چسبنده با css و jquery

ساخت منوی چسبنده یا sticky menu با CSS

اگه میخواین منوی سایت شما کلا ثابت باشه و هر چقدر که اسکرول کردید تکون نخوره فقط کافیه که به منو سایتتون استایل های مقابل رو بدید:

اگر با position های css آشنایی ندارید می تونید از آموزش CSS سی اس اس پارک استفاده کنید.

کدهای CSS: .sticky_menu {
position:fixed;
top:0;
right:0;
}

ساخت منوی چسبنده یا sticky menu با jQuery

اما اگه قصد دارید منوی سایتتون در ابتدا چسبنده نباشه و بعد از اینکه کاربر اسکرول کرد تازه چسبنده بشه باید از کدهای css و jquery مقابل استفاده کنید.

حالا ممکنه از اینکه کاربر اسکرول کرد و منو چسبنده شد ، چند ثانیه موس رو تکون نده و از مطالب سایت استفاده کنه؛ پس بهتره در این شرایط ما منوی چسبنده ی سایتمون رو محو کنیم تا مزاحم کاربر نشه و بتونه سایت مارو ببینه.

برای این کار فقط کافیه بگیم بعد از مثلا ۲ ثانیه بیا و منو رو محو کن. برای اینکار از دستور setTimeOut در جی کوئری استفاده میکنیم و به کمک این دستور منو رو محو میکنیم.

نکته : اگر نمیخواین که منو چسبنده سایتتون بعد از مکث کاربر پنهان بشه فقط کافیه دستور setTimeOut و clearTimeout رو از داخل کد ها پاک کنید!

اگر با jQuery آشنایی ندارید می تونید از آموزش jquery سی اس اس پارک استفاده کنید.

جهت درخواست پیاده سازی منوی چسبنده روی سایت شما به id تلگرام csspark پیام بدید.

کدهای CSS: .sticky {
position: fixed;
top:0;
right:0
}
کدهای jquery : $(document).ready(function(){
var set = 0;
$(window).scroll(function () {
clearTimeout(set);
scrollTop = $(window).scrollTop();
if ( scrollTop > 200 ){
$('.menu').addClass('sticky');
set = setTimeout(function () { $('.menu').fadeOut(500); },۲۰۰۰); } else {
$('.menu').removeClass('sticky');
}
})
});


  • ساخت منوی چسبنده یا sticky menu به کمک css و jquery
    نام نویسنده : امیرمسعود طالاری
  • ساخت منوی چسبنده یا sticky menu به کمک css و jquery
    نام نویسنده : رضا ابولحسن زاده
  • ساخت منوی چسبنده یا sticky menu به کمک css و jquery
    نام نویسنده : رضا ابولحسن زاده
  • ساخت منوی چسبنده یا sticky menu به کمک css و jquery
    نام نویسنده : رضا ابولحسن زاده

درباره نویسنده : برنامه نویس وب و کارشناسی ارشد رشته نرم افزار

پاسخی بگذارید

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