مخفی کردن منو و هدر در زمان اسکرول به سمت پایین در بوت استرپ 4
مخفی کردن منو و هدر در زمان اسکرول به سمت پایین در بوت استرپ 4

مخفی کردن منو و هدر در زمان اسکرول به سمت پایین در بوت استرپ 4

خیلی وقت ها شما منوی اصلی سایت خودتون رو به صورت ثابت قرار میدید ، یعنی وقتی کاربر صفحه رو اسکرول میکنه منو همیشه در بالای صفحه قرار داره و کاربر همیشه بهش دسترسی داره.اما خیلی اوقات همین منو باعث شلوغ تر شدن صفحه و کاهش دید کاربر میشه که یکی از راه حل های آن مخفی کردن در هنگام اسکرول به پایین است.شاید بپرسید چرا اسکرول به پایین ؟! یکی از مزیت های اسکرول به پایین این هست که کاربر در حال مرور صفحه هست و نیازی به نمایش منو ثابت ندارد و میخواهد بیشترین دید به محتوا را داشته باشد.

در این روش وقتی کاربر صفحه را به سمت بالا مرور کند یا به عبارتی به سمت بالا اسکرول کند ، منو ثابت بالا نمایش داده می شود و کاربر در صورت نیاز می تواند به منوهای دیگر پیمایش و یا منتقل شود.

اما روش طرز تهیه مخفی کردن منو در هنگام اسکرول

کد زیر در واقع کلاس 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;
}

نوشته شده با عشق

محمدحسین نیازی اولش طراحی گرافیکی و رابط کاربری می کرده بعد ها کارشناسی نرم افزارشو گرفته و به کد زنی علاقه مند میشه ، تا اینکه تیم طراحی استودیو لاوان رو راه میندازه و بعدش میره سر وقت آی سی ام اس و الان اون اینجاست تا با تجربه بیش از 12 ساله خودش ، فوت‌وفن‌های خودش رو در اختیار شما قرار بده تا اون‌ها رو در جریان کاری‌تون بگنجونین و مهارت‌هاتون رو ارتقاء بدین.

محمدحسین نیازی

پست های مرتبط

آی سی ام اس

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