कैसे करें - स्क्रॉल पर बार को नीचे की ओर स्लाइड करें
सीएसएस और जावास्क्रिप्ट के साथ स्क्रॉल पर नेविगेशन बार को नीचे स्लाइड करने का तरीका जानें।
कैसे एक बार नीचे स्लाइड करने के लिए
चरण 1) HTML जोड़ें:
नेविगेशन बार बनाएं:
उदाहरण
<div id="navbar">
<a href="#home">Home</a>
<a href="#news">News</a>
<a href="#contact">Contact</a>
</div>
चरण 2) सीएसएस जोड़ें:
नेविगेशन बार को स्टाइल करें:
उदाहरण
#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;
}
चरण 3) जावास्क्रिप्ट जोड़ें:
उदाहरण
// 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";
}
}