Πώς να δημιουργήσετε: κρύψτε το μενού κατά την κίνηση

Πώς να κρύψετε τη γραμμή導航 κατά την αναστροφή προς τα κάτω

Πρώτο βήμα - Προσθέστε HTML:

Δημιουργία γραμμής導航:

<div id="navbar">
  <a href="#home">Αρχική σελίδα</a>
  <a href="#news">Ειδήσεις</a>
  <a href="#contact">Επικοινωνία</a>
</div>

Δεύτερο βήμα - Προσθέστε CSS:

Ορισμός στυλ της γραμμής導航:

#navbar {
  χρώμα 배경: #333; /* Μαύρο χρώμα φόντου */
  θέση: cố định; /* Κρατήστε το κολλημένο/πασμένο */
  top: 0; /* Μέσα στο πάνω μέρος */
  πλάτος: 100%; /* Πλήρες πλάτος */
  μεταβλητή μετάβασης: top 0.3s; /* Εφέ μετάβασης κατά την κίνηση προς τα κάτω (προς τα πάνω) */
}
/* Ορισμός στυλ των δεσμών της γραμμής導航 */
#navbar a {
  κατεύθυνση: αριστερά;
  προσθήκη: block;
  χρώμα: λευκό;
  κέντρωση κειμένου: κέντρο;
  απόσταση πλήρους: 15px;
  χωρισμός κειμένου: none;
}
#navbar a:hover {
  χρώμα 배경: #ddd;
  χρώμα: μαύρο;
}

Τρίτο βήμα - Προσθέστε JavaScript:

/* Όταν ο χρήστης κάνει αναστροφή προς τα κάτω, κρύψτε τη γραμμή導航. Όταν ο χρήστης κάνει αναστροφή προς τα πάνω, εμφανίστε τη γραμμή導航. */
var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
  var currentScrollPos = window.pageYOffset;
  if (prevScrollpos > currentScrollPos) {
    document.getElementById("navbar").style.top = "0";
  }
    document.getElementById("navbar").style.top = "-50px";
  }
  prevScrollpos = currentScrollPos;
}

Δοκιμάστε το προσωπικά