چگونه ایجاد شود: مخفی کردن منو در حال رول کردن

چگونه در حال رول کردن به پایین ناوبری مخفی شود

مرحله اول - اضافه کردن HTML:

ایجاد ناوبری:

<div id="navbar">
  <a href="#home">خانه</a>
  <a href="#news">اخبار</a>
  <a href="#contact">تماس</a>
</div>

مرحله دوم - اضافه کردن CSS:

تنظیمات استایل ناوبری:

#navbar {
  رنگ پس‌زمینه: #333; /* رنگ پس‌زمینه سیاه */
  پوزیشن: ثابت; /* به عنوان چسبنده/ثابت */
  top: 0; /* در بالا نگه دارد */
  عرض: 100%; /* عرض کامل */
  transition: top 0.3s; /* اثر گذار برای رول کردن به پایین (به بالا) */
}
/* تنظیمات استایل برای لینک‌های ناوبری */
#navbar a {
  شناور: چپ;
  نمایش: بلوک;
  رنگ: سفید;
  چینش متنی: وسط;
  پاداش: 15px;
  زیرخط نداشته باشد;
}
#navbar a:hover {
  رنگ پس‌زمینه: #ddd;
  رنگ: سیاه;
}

مرحله سوم - اضافه کردن JavaScript:

/* هنگام رول کردن کاربر به پایین، ناوبری مخفی شود. هنگام رول کردن کاربر به بالا، ناوبری نمایش داده شود. */
var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
  var currentScrollPos = window.pageYOffset;
  if (prevScrollpos > currentScrollPos) {
    document.getElementById("navbar").style.top = "0";
  }
    document.getElementById("navbar").style.top = "-50px";
  }
  prevScrollpos = currentScrollPos;
}

به طور مستقیم امتحان کنید