Nasıl oluşturulur: Sayfa kayarken aşağı kaydırma navigasyon çubuğu

Navigasyon çubuğunu nasıl aşağı kaydırılır

İlk adım - HTML ekleyin：

Navigasyon çubuğu oluşturun：

<div id="navbar">
  <a href="#home">Anasayfa</a>
  <a href="#news">Haberler</a>
  <a href="#contact">İletişim</a>
</div>

İkinci adım - CSS ekleyin：

Navigasyon çubuğu tarzını ayarlayın：

#navbar {
  background-color: #333; /* Siyah arka plan rengi */
  position: fixed; /* Yerleştirin/fixed hale getirin */
  top: -50px; /* 50px ile üst görünümden gizlenmiş navigasyon çubuğu */
  width: 100%; /* Tam genişlik */
  transition: top 0.3s; /* Yüksekliğe (düşüşe) geçiş etkisi */
}
/* 导航栏 bağlantılarının tarzını ayarlayın */
#navbar a {
  float: left;
  display: block;
  color: white;
  text-align: center;
  padding: 15px;
  text-decoration: none;
}
#navbar a:hover {
  background-color: #ddd;
  color: black;
}

Üçüncü adım - JavaScript ekleyin：

// 当用户从文档顶部向下滚动 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";
  }
}

Kişisel olarak deneyin