مخفی کردن منو و هدر در زمان اسکرول به سمت پایین در بوت استرپ 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 ساله خودش ، فوت‌وفن‌های خودش رو در اختیار شما قرار بده تا اون‌ها رو در جریان کاری‌تون بگنجونین و مهارت‌هاتون رو ارتقاء بدین.

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

پست های مرتبط

14 دیدگاه تاکنون ارسال شده
  • مهیار
    مهمان
    سلام من برعکس همین رو میخوام میشه بگید چطوریه و این اسکرول بار بالای صفحه این چطوریه اگه میشه راهنمایی کنید
    • محمدحسین نیازی
      مدیر
      در پاسخ به مهیار . گفته :
      سلام متوجه منظورتون نشدم ؟ یعنی وقتی پایین میاید نمایش داده بشه و وقتی بالا میرید مخفی بشه ؟ اینطوری توی خوندن محتوا مشکل نمی خورید ؟
  • حسن
    مهمان
    سلام من این کد رو تست کردم و خیلی خوب کار کرد فقط یک مشکل دارد وقتی به سمت پایین اسکرول میکنیم مخفی میشه ولی وقتی از پایین سایت میخواهیم یک خورده به سمت بالا اسکرول کنیم مجدد بخشی که مخفی شده دیده میشه. درحالی که من میخواهم طوری باشه که وقتی مجدد اسکرول به اول اول صفحه رسید دیده بشه نه یک خورده که به سمت بالا میریم.
    • محمدحسین نیازی
      مدیر
      در پاسخ به حسن. گفته :
      سلام دوست عزیز من این کد به صورت پیش فرض وقتی پایین میرین به دلیل اینکه کاربر صفحه مطالب رو تمام صفحه ببینه مخفی میشه و وقتی به سمت بالا اسکرول میکنه این منو و یا هدر پدیدار میشه برای تغییرش باید یه اصلاح جزئی توی کدهای بالا بشه که اگر با این توضیحات بازم میخوایید به صورت دلخواه شما بشه اطلاع بدید تا خدمتتون عرض کنم
  • سمیرا
    مهمان
    سلام. به دنبال طراحی یک سایتی هستم که پس زمینه ثابت داشته باشم کامل زیر کل سایتم.یعنی طراحی من به صورت یک لایه رویی روی ان قرار گیرد و با اسکرول ظاهر شوند. ممنون میشوم کمک و راهنمایی بفرمایید.
    • محمدحسین نیازی
      مدیر
      در پاسخ به سمیرا. گفته :
      سلام خدمت شما برای گذاشتن پس زمینه ثابت میتونید از طریق سی اس اس به کلاس body قالبتون بکگراند اضافه کنید مثال : body { background-image: url(img/bg.jpg); background-repeat: no-repeat; background-size: cover; background-position: 50%; } در اینجا img/bg.jpg مسیر تصویر پس زمینه هست البته اگر سایتتون آنلاین باشه بهتر میشه راهنمایی کرد
  • مهدی
    مهمان
    این روش در بوت استرپ نسخه‌های پائین تر جواب نمیده؟
    • محمدحسین نیازی
      مدیر
      در پاسخ به مهدی. گفته :
      با سلام خدمت شما این روش بروی بوت استرپ 3 تست شده و بدون هیچ مشکلی انجام شده اما گاهیی مواقع تداخلاتی مبنی بر نمایش و عدم نمایش در نسخه 3 بوت استرپ هست که باس ی اس اس قابل حل هست اما نسخه های پایین تر از 3 بوت استرپ تست نشده
      • مهدی
        مهمان
        در پاسخ به محمدحسین نیازی. گفته :
        متشکر مهندس فقط بفرمائید این کد رو تو کدوم فایل js باید اضافه کنیم؟ چون قالب من فایلهای متعددی داره
        • محمدحسین نیازی
          مدیر
          در پاسخ به مهدی. گفته :
          خواهش میکنم فایل های جاوا قالب متعدد هستند اما اسم اکثر فایل های جاوا اسکریپت قالب ها یا main.js هست یا template.js ، که معمولا هم از مسیر زیر قابل دسترس هستند /YOUR-SITE/templates/YOUR-TEMPLATE/js
  • وحید اقا
    مهمان
    من قبلا با جاوااسکریپ و یه روش دیگه که کلی سنگینم بود اینطوری کردم منو رو ولی نمیدونستم با خود قابلیت پیس فرض بوت استرپ هم میشه اینطوریش کرد مثل همیشه اموزش هاتون نابه
    • محمدحسین نیازی
      مدیر
      در پاسخ به وحید اقا. گفته :
      نظر لطف شماست بله این قابلیت یه ترفندی از استفاده قابلیت های fadeIn و fadeOut هست
  • احمدی
    مهمان
    آقا این شناور شدن ستون سمت چپ رو هم آموزش بدید مثل ووردپرس شده تشکر
    • محمدحسین نیازی
      مدیر
      در پاسخ به احمدی. گفته :
      در حال آماده سازی محتوا برای برخی افزونه ها و بسته های اپن سورس و رایگان هستیم اما این آموزش هم در آینده حتما خواهم نوشت چون خیلی ها دنبال روشش هستند
ارسال نظر
در پاسخ به Some User

آی سی ام اس

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