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

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

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

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

<div id="navbar">
  <a href="#home">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
</div>

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

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

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

مرحله سوم - اضافه کردن جاوااسکریپت:

/* جبائی کاربر کی سمت پائین رول می کری، ناویگیشن بار مخفی می شود. جبائی کاربر کی سمت بالا رول می کری، ناویگیشن بار نمودار می شود. */
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;
}

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