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

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

امتیاز شما به این پست
(16)
چاپ  

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

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

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

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

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

نیاز به مشاوره بیشتر دارید؟ برای صحبت با متخصصان ما تماس بگیرید.
0933-8883035 5 دقیقه رایگان

مطالعه در 2 دقیقه

به همراه یک فنجان قهوه

دیدگاه کاربران

مکانی برای پرسش و پاسخ شما

دیدگاه های اخیر

دیدگاه (8)

This comment was minimized by the moderator on the site

این روش در بوت استرپ نسخه‌های پائین تر جواب نمیده؟

This comment was minimized by the moderator on the site

با سلام خدمت شما
این روش بروی بوت استرپ 3 تست شده و بدون هیچ مشکلی انجام شده اما گاهیی مواقع تداخلاتی مبنی بر نمایش و عدم نمایش در نسخه 3 بوت استرپ هست که باس ی اس اس قابل حل هست
اما نسخه های پایین تر از 3 بوت استرپ تست نشده

This comment was minimized by the moderator on the site

متشکر مهندس فقط بفرمائید این کد رو تو کدوم فایل js باید اضافه کنیم؟ چون قالب من فایلهای متعددی داره

This comment was minimized by the moderator on the site

خواهش میکنم
فایل های جاوا قالب متعدد هستند اما اسم اکثر فایل های جاوا اسکریپت قالب ها یا main.js هست یا template.js ، که معمولا هم از مسیر زیر قابل دسترس هستند
/YOUR-SITE/templates/YOUR-TEMPLATE/js

This comment was minimized by the moderator on the site

من قبلا با جاوااسکریپ و یه روش دیگه که کلی سنگینم بود اینطوری کردم منو رو ولی نمیدونستم با خود قابلیت پیس فرض بوت استرپ هم میشه اینطوریش کرد
مثل همیشه اموزش هاتون نابه

This comment was minimized by the moderator on the site

نظر لطف شماست
بله این قابلیت یه ترفندی از استفاده قابلیت های fadeIn و fadeOut هست

This comment was minimized by the moderator on the site

آقا این شناور شدن ستون سمت چپ رو هم آموزش بدید
مثل ووردپرس شده
تشکر

This comment was minimized by the moderator on the site

در حال آماده سازی محتوا برای برخی افزونه ها و بسته های اپن سورس و رایگان هستیم اما این آموزش هم در آینده حتما خواهم نوشت چون خیلی ها دنبال روشش هستند

هنوز هیچ دیدگاهی ارسال نشده است.

ارسال دیدگاه

  1. ارسال دیدگاه به عنوان مهمان ثبت نام یا ورورد به ناحیه کاربری.
پیوست ها (0 / 3)
اشتراک موقعیت شما