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

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

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

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

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