سورس پنهان سازی منو در هنگام حرکت اسکرول با جی کوئری

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

ایجاد ساختار

ساختار HTML  از یک تشکیل header.cd-auto-hide-headerعنصر استفاده می شود به بسته بندی کردن ناوبری اولیه ( nav.cd-primary-nav) و یک main.cd-main-contentبرای محتوای اصلی صفحه.

Menu

• The team
• Our Services
• Our Projects
• Contact Us

اگر صفحه دارای زیر ناوبری باشد، اضافی nav.cd-secondary-navدر داخل عنصر هدر قرار می گیرد:

Menu

• Intro

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

، سپس .cd-secondary-navعنصر را وارد کنید:

Menu

افزودن سبک

ما از .cd-auto-hide-headerکلاس استفاده کردیم تا سبک اصلی هدر خودکار مخفی را تعریف کنیم. به صورت پیش فرض، هدر دارای موقعیت ثابت و بالای صفر است. هنگامی که کاربر شروع به پیمایش می کند، .is-hiddenکلاس برای مخفی کردن سرصفحه درست در بالای صفحه نمایش استفاده می شود.

.cd-auto-hide-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  transition: transform .5s;
}
.cd-auto-hide-header.is-hidden {
  transform: translateY(-100%);
}

در فایل style.css (یا style.scss اگر از Sass استفاده می کنید ) کد شما درست زیر نظر '1. خودکار پنهان کردن ناوبری - Simple 'یکی از مواردی است که شما باید در پروژه خود وارد آن شوید، اگر از پیمایش خودکار' مخفی 'ساده استفاده کنید (فقط برای ناوبری اولیه).

اگر سرصفحه شما یک زیر ناوبری (درست زیر زیر ناوبری اصلی) باشد، پس شما باید سبک زیر را نیز در قسمت 2 قرار دهید. خودکار پنهان کردن ناوبری - با Sub Nav 'نظر. این بلوک دوم از کد برای تعیین سبک اصلی ناوبری ثانویه (با استفاده از .cd-secondary-navکلاس) استفاده می شود.

در نهایت، اگر ناحیه ثانویه شما زیر بخش قهرمان باشد، علاوه بر دو بلوک قبلی، شما باید کد زیر را نیز در قسمت 3 قرار دهید. خودکار پنهان کردن ناوبری - با قسمت Sub Nav + Hero Image '. این استفاده می شود برای تعریف دو طبقه، .fixedو .slide-up، که به پیمایش دوم اضافه در حالی که اسکرول (یکی از اولین، آن را به نظر سنجی و دوم به آن اسلاید تا زمانی که ناوبری اولیه پنهان است).

.cd-secondary-nav.fixed {
  position: fixed;
  top: 60px;
}
.cd-secondary-nav.slide-up {
  transform: translateY(-60px);
}

در نهایت، بلوک های \ Main content و Intro Section 'برای تعریف سبک اساسی برای ( .cd-main-contentو  .cd-hero elementsعمدتا padding / margin برای حساب هدر ثابت) استفاده می شوند.

مدیریت رویدادها

ما از jQuery برای گوش دادن به رویداد اسکرول در شیء پنجره استفاده می کنیم.

var scrolling = false;
   $(window).on('scroll', function(){
      if( !scrolling ) {
         scrolling = true;
         (!window.requestAnimationFrame)
            ? setTimeout(autoHideHeader, 250)
            : requestAnimationFrame(autoHideHeader);
      }
});

عملکرد autoHideHeader () مراقبت از پنهان کردن / نشان دادن ناوبری مطابق با اینکه آیا کاربر پیمایش بالا یا پایین انجام می شود.