Gewusst wie: Schieben Sie beim Scrollen eine Leiste nach unten
Erfahren Sie, wie Sie mit CSS und JavaScript eine Navigationsleiste beim Scrollen nach unten schieben.
Wie man eine Stange herunterrutscht
Schritt 1) HTML hinzufügen:
Erstellen Sie eine Navigationsleiste:
Beispiel
<div id="navbar">
<a href="#home">Home</a>
<a href="#news">News</a>
<a href="#contact">Contact</a>
</div>
Schritt 2) CSS hinzufügen:
Gestalten Sie die Navigationsleiste:
Beispiel
#navbar {
background-color: #333; /* Black background
color */
position: fixed; /* Make it stick/fixed
*/
top: -50px; /* Hide the navbar 50 px outside of the
top view */
width: 100%; /* Full width */
transition: top 0.3s; /* Transition effect when sliding down (and up) */
}
/* Style the navbar links */
#navbar a {
float: left;
display: block;
color: white;
text-align: center;
padding: 15px;
text-decoration: none;
}
#navbar
a:hover {
background-color: #ddd;
color: black;
}
Schritt 3) JavaScript hinzufügen:
Beispiel
// When the user scrolls down 20px from the top of the document, slide down
the navbar
// When the user scrolls to the top of the page, slide up the
navbar (50px out of the top view)
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";
}
}