منوی ثابت

این تاپیک 1 پاسخ و 2 مشارکت کننده دارد . آخرین آپدیت توسط :  حسن امجد ،‏ 2 سال و 4 ماه پیش .

این تاپیک تاکنون 612 بازدید داشته است .

تگ شده :  , , , ,

نویسنده پست
چهار شنبه ، 23 جولای 2014     5:22 ب.ظ #


cuty

Subscriber
24 پست66 تاپیک

سلام برای اینکه navigation bar که از بالای پنجره مرورگر فاصله داره زمان اسکرول فاصلش 0 بشه و ثابت هم بشه یعنی موقع اسکرول نمایش داده بشه باید چکار کرد؟

0  تشکر
چهار شنبه ، 23 جولای 2014     5:42 ب.ظ #


حسن امجد

Subscriber
10 پست2 تاپیک

function sticky_menu() {
var top = jQuery(window).scrollTop();
var nav_top = jQuery('nav').outerHeight() + 170;
if (top > nav_top) {
jQuery('nav').addClass('sticky');
$('nav').css("opacity","0.9");
} else {
$('nav').removeClass('sticky');
$('nav').css("opacity","1");
}
}

به این کد جی کوئری دقت کن
در متغیر top ارتفاع فعلی اسکرول از بالای صفحه ذخیره میشه
و در متغیر nav_top طول خود منو به علاوه ی فاصله ی اون از بالای صفحه شده (مقدار 170 که این مقدار میتونه متغیر باشه)  بعد هم در یک شرط گفته شده که اگر اسکرول به منو رسید از اونجا به بعد منو دارای کلاس sticky بشه
خاصیت کلاس sticky در css به صورت زیر است :
.sticky {
left: 0 !important;
position: fixed !important;
top: 0 !important;
width: 100% !important;
margin:auto !important;
}

حالا اگه به خاصیت css کلاس دقت کنی میبینی که حالت مکان اون رو به صورت ثابت بالای صفحه ی مرورگر گذاشته
همین کد رو استفاده کنی نتیجه میگیری البته با کمی تغییر که با توضیحات من میتونی اعمالش کنی

1  تشکر
پست 1 تا 2 (از مجموع 2 پست)

برای پاسخ دادن به این تاپیک باید وارد سایت شوید .