Hoe OM - Skuif 'n balk af met blaai
Leer hoe om 'n navigasiebalk af te gly wanneer jy blaai met CSS en JavaScript.
Hoe om 'n balk af te gly
Stap 1) Voeg HTML by:
Skep 'n navigasiebalk:
Voorbeeld
<div id="navbar">
<a href="#home">Home</a>
<a href="#news">News</a>
<a href="#contact">Contact</a>
</div>
Stap 2) Voeg CSS by:
Stileer die navigasiebalk:
Voorbeeld
#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;
}
Stap 3) Voeg JavaScript by:
Voorbeeld
// 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";
}
}