ملت وب مرجع دانلود قالب وردپرس فارسی و قالب فارسی وردپرس و قالب html و افزونه وردپرس
24
ساعت با شما

04144235034

آیا میدانستید دلیل اصلی محبوبیت ملت وب در چیست ؟ ملت وب به عنوان مرجعی پیشرو در پشتیبانی مشتریان خود توانسته رضایت کاربران را در برگیرد در واقع در ملت وب وب شخص پاسخگو نیاز های شما نیست در اینجا یک شرکت معتبر و پاسخگو در کنار مشتریان خود می باشد و تمام مسئولیت پشتیبانی بر عهده شرکت می باشد و نقطه قوت فوق العاده بالای برای یک وب سایت می باشد
فروش محصولات
فروش محصولات شما

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

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

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

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

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

 

 

ایجاد ساختار

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


 

Menu

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


 

Menu

در نهایت، اگر ناحیه ثانویه زیر یک بلوک قهرمان باشد، یک .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 () مراقبت از پنهان کردن / نشان دادن ناوبری مطابق با اینکه آیا کاربر پیمایش بالا یا پایین انجام می شود.

حميد  شریفی
نویسنده
حميد شریفی
تعداد بازدید: 626
تعداد دانلود : 142
تاریخ 1397-3-12
کانال تلگرامی ما تا 50% تخفیف دریافت کنید
مطالبی که شاید خوشتان بیاد
سلام! ما 26 محصول رایگان در بخش آموزش javascript داریم اگر قصد بازدید دارید روی لینک سبز رنگ روبرو بزن بریم