كيفية إنشاء: السحب إلى الأسفل للنافذة التوجيهية عند التمرير

كيفية السحب إلى الأسفل للنافذة التوجيهية

الخطوة الأولى - إضافة HTML:

إنشاء النافذة التوجيهية:

<div id="navbar">
  <a href="#home">الصفحة الرئيسية</a>
  <a href="#news">أخبار</a>
  <a href="#contact">اتصل بنا</a>
</div>

الخطوة الثانية - إضافة CSS:

ضبط نمط النافذة التوجيهية:

#navbar {
  لون الخلفية: #333; /* لون خلفية أسود */
  وضع: ثابت; /* لجعلها تلتصق / ثابتة */
  الاعلى: -50px; /* إخفاء النافذة التوجيهية خارج عرض الرؤية 50px */
  عرض: 100%; /* عرض كامل */
  انتقال: الاعلى 0.3s; /* تأثير التدفق عند السحب إلى الأسفل (أو لأعلى) */
}
/* ضبط نمط الروابط في النافذة التوجيهية */
#navbar a {
  غرق: اليسار;
  عرض: مكتبة;
  اللون: أبيض;
  محاذاة النص: الوسط;
  ملء: 15px;
  تفاصيل النص: لا;
}
#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";
  } else {
    document.getElementById("navbar").style.top = "-50px";
  }
}

جرب بنفسك