Πώς να δημιουργήσετε: Μετακίνηση προς τα κάτω κατά τη διάρκεια του scroll

Πώς να μετακινήσετε την πλοήγηση προς τα κάτω

Πρώτο βήμα - Προσθήκη HTML:

Δημιουργία πλοήγησης:

<div id="navbar">
  <a href="#home">Αρχική</a>
  <a href="#news">Νέα</a>
  <a href="#contact">Επικοινωνία</a>
</div>

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

Ρύθμιση στυλ πλοήγησης:

#navbar {
  χρώμα περιβάλλοντος: #333; /* Χρώμα περιβάλλοντος μαύρο */
  θέση: σταθερή; /* Κάθεται σαν κολλημένο */
  top: -50px; /* Κρύβει την πλοήγηση εκτός της θέας 50px */
  πλάτος: 100%; /* Πλήρες πλάτος */
  μεταβλητότητα: top 0.3s; /* Απότομη μετάβαση κατά την κίνηση προς τα κάτω (προς τα πάνω) */
}
/* Ορισμός του στυλ των συνδέσμων της πλοήγησης */
#navbar a {
  κίνηση: αριστερά;
  παρουσίαση: block;
  χρώμα: λευκό;
  πρόγραμμα κειμένου: κέντρο;
  πίνακας γεμίσματος: 15px;
  χωρισμός κειμένου: none;
}
#navbar a:hover {
  χρώμα περιβάλλοντος: #ddd;
  χρώμα: μαύρο;
}

Τρίτο βήμα - Προσθήκη JavaScript:

// Όταν ο χρήστης κάνει scroll από την κορυφή του έγγραφου 20px, η πλοήγηση μετακινείται προς τα κάτω
// Όταν ο χρήστης κάνει scroll στη κορυφή της σελίδας, μετακινείται προς τα πάνω η πλοήγηση (από τη θέα 50px)
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
  if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
    document.getElementById("navbar").style.top = "0";
  }
    document.getElementById("navbar").style.top = "-50px";
  }
}

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