Làm thế nào để - Trượt xuống một thanh trên cuộn
Tìm hiểu cách trượt thanh điều hướng xuống khi cuộn bằng CSS và JavaScript.
Làm thế nào để Trượt xuống một thanh
Bước 1) Thêm HTML:
Tạo thanh điều hướng:
Thí dụ
<div id="navbar">
<a href="#home">Home</a>
<a href="#news">News</a>
<a href="#contact">Contact</a>
</div>
Bước 2) Thêm CSS:
Tạo kiểu cho thanh điều hướng:
Thí dụ
#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;
}
Bước 3) Thêm JavaScript:
Thí dụ
// 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";
}
}