Bagaimana untuk cipta: menyembunyikan menu semasa menggerakkan

Bagaimana untuk menyembunyikan pelayar semasa menggerakkan ke bawah

Keseluruhan langkah ke-1 - Tambahkan HTML:

Cipta pelayar navigasi:

<div id="navbar">
  <a href="#home">Rumah</a>
  <a href="#news">Berita</a>
  <a href="#contact">Hubungi</a>
</div>

Keseluruhan langkah ke-2 - Tambahkan CSS:

Tetapkan gaya pelayar:

#navbar {
  bg: #333; /* Warna latar belakang hitam */
  posisi: tetap; /* Membuat ia tetap / tetap */
  top: 0; /* Tetap di atas */
  lebar: 100%; /* Lebar penuh */
  transisi: top 0.3s; /* Efect transisi semasa kegerakan ke bawah (ke atas). */
{}
/* Tetapkan gaya pautan pelayar. */
#navbar a {
  float: kiri;
  display: blok;
  warna: putih;
  tebal-teks: tengah;
  margin: 15px;
  tebal: tak ada;
{}
#navbar a:hover {
  bg: #ddd;
  warna: hitam;
{}

Keseluruhan langkah ke-3 - Tambahkan JavaScript:

/* Semasa pengguna menggerakkan ke bawah, sembunyikan pelayar. Semasa pengguna menggerakkan ke atas, tunjukkan pelayar. */
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;
{}

亲自试一试