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

چگونه ناوبری را به پایین حرکت دهیم

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

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

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

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

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

#navbar {
  رنگ پس‌زمینه: #333; /* رنگ پس‌زمینه سیاه */
  حالت مکان: fixed; /* باعث چسبیدن/ثابت ماندن می‌شود */
  top: -50px; /* ناوبری را در 50px از دیدگاه بالای صفحه مخفی کنید */
  پهنا: 100%; /* پهنا کامل */
  گذر زمان: top 0.3s; /* اثر گذار در حرکت به پایین (به بالا) */
}
/* تنظیمات استایل برای لینک‌های ناوبری */
#navbar a {
  حرکت در سمت چپ: left;
  نمایش: block;
  رنگ: سفید;
  محوری قرار دادن متن: center;
  پدینگ: 15px;
  تفاوت خط: none;
}
#navbar a:hover {
  رنگ پس‌زمینه: #ddd;
  رنگ: سیاه;
}

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

// هنگامی که کاربر از بالا به پایین 20px در سند می‌چرخد، ناوبری را به پایین حرکت دهید
// هنگامی که کاربر به بالای صفحه می‌رود، ناوبری را به بالا حرکت دهید (50px از دیدگاه بالای صفحه)
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
  if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
    document.getElementById("navbar").style.top = "0";
  }
    document.getElementById("navbar").style.top = "-50px";
  }
}

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