Kendinizi nasıl oluşturun: Kayarken menü gizleme

Aşağı doğru kayarken navigasyon menüsünü gizlemek için CSS ve JavaScript nasıl kullanılır öğrendiğinizi öğrenin.

Kişisel olarak deneyin

Aşağı doğru kayarken navigasyon çubuğunu nasıl gizleyelim

Birinci 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 renk */
  position: fixed; /* Yapışkan/fixe yapın */
  top: 0; /* Üstte tutun */
  width: 100%; /* Tam genişlik */
  transition: top 0.3s; /* Aşağı (yukarı) kayarken 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：

/* 当用户向下滚动时，隐藏导航栏。当用户向上滚动时，显示导航栏。 */
var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
  var currentScrollPos = window.pageYOffset;
  if (prevScrollpos > currentScrollPos) {
    document.getElementById("navbar").style.top = "0";
  } else {
    document.getElementById("navbar").style.top = "-50px";
  }
  prevScrollpos = currentScrollPos;
}

Kişisel olarak deneyin