خیلی وقت ها شما منوی اصلی سایت خودتون رو به صورت ثابت قرار میدید ، یعنی وقتی کاربر صفحه رو اسکرول میکنه منو همیشه در بالای صفحه قرار داره و کاربر همیشه بهش دسترسی داره.اما خیلی اوقات همین منو باعث شلوغ تر شدن صفحه و کاهش دید کاربر میشه که یکی از راه حل های آن مخفی کردن در هنگام اسکرول به پایین است.شاید بپرسید چرا اسکرول به پایین ؟! یکی از مزیت های اسکرول به پایین این هست که کاربر در حال مرور صفحه هست و نیازی به نمایش منو ثابت ندارد و میخواهد بیشترین دید به محتوا را داشته باشد.
در این روش وقتی کاربر صفحه را به سمت بالا مرور کند یا به عبارتی به سمت بالا اسکرول کند ، منو ثابت بالا نمایش داده می شود و کاربر در صورت نیاز می تواند به منوهای دیگر پیمایش و یا منتقل شود.
اما روش طرز تهیه مخفی کردن منو در هنگام اسکرول
کد زیر در واقع کلاس navbar را در هنگام اسکرول به پایین مخفی و در هنگام اسکرول به سمت بالا ، کلاس navbar را نمایش می دهد. در اینجا navbar همان کلاس منوی نوار ناوبری یا همان منو و هدر ثابت هست که در بالا توضیح داده شده است.
اگر شما از jQuery Slim استفاده نمی کنید میتوانید از افکت های fadeIn و fadeOut برای بهتر نمایش دادن استفاده کنید.
قطعه کد زیر را به فایل جاوااسکریپت قالب سایت خود اضافه کنید :
$(function () {
var lastScrollTop = 0;
var $navbar = $('.navbar');
$(window).scroll(function(event){
var st = $(this).scrollTop();
if (st > lastScrollTop) { // scroll down
// use this is jQuery full is used
$navbar.fadeOut()
// use this to use CSS3 animation
// $navbar.addClass("fade-out");
// $navbar.removeClass("fade-in");
// use this if no effect is required
// $navbar.hide();
} else { // scroll up
// use this is jQuery full is used
$navbar.fadeIn()
// use this to use CSS3 animation
// $navbar.addClass("fade-in");
// $navbar.removeClass("fade-out");
// use this if no effect is required
// $navbar.show();
}
lastScrollTop = st;
});
});
افکت های CSS3 transitions در صورتی که از jQuery Slim استفاده می کنید به خوبی توسط fadeIn و fadeOut پشتیبانی می شود.برای اینکار کافیست خط های زیر را به فایل Css قالب خود اضافه کنید.
.fade-in {
visibility: visible;
opacity: 1;
transition: opacity 1s linear;
}
.fade-out {
visibility: hidden;
opacity: 0;
transition: visibility 0s 1s, opacity 1s linear;
}
پست های اخیر بلاگ
- ساده کردن و حذف فیلد های غیرضروری در ثبت نام و عضویت جوملا 01 مهر 1398
- حذف صفر و اعشار از قیمت در افزونه فروش فایل دیجی کام | DigiCom 04 ارديبهشت 1398
- جوملا و وردپرس با یکدیگر ادغام خواهند شد 13 فروردين 1398
- مخفی کردن منو و هدر در زمان اسکرول به سمت پایین در بوت استرپ 4 11 فروردين 1398
- سال نو با ایده هایی نو و اتفاقاتی که در سال 1397 بر ما گذشت 29 اسفند 1397
دیدگاه های اخیر
محمدحسین نیازی نوشته :
ai نوشته :
محمدحسین نیازی نوشته :
رامین نوشته :