नेविगेशन बार को नीचे की ओर कैसे स्लाइड करें

नेविगेशन बार को नीचे की ओर कैसे स्लाइड करें

पहला कदम - एचटीएमएल जोड़ें:

नेविगेशन बार बनाएं:

<div id="navbar">
  <a href="#home">घर</a>
  <a href="#news">समाचार</a>
  <a href="#contact">संपर्क</a>
</div>

दूसरा कदम - सीएसएस जोड़ें:

नेविगेशन बार के शैली को सेट करें:

#navbar {
  पृष्ठभूमि रंग: #333; /* काला पृष्ठभूमि रंग */
  position: fixed; /* इसे चिपकाएं/स्थिर करें */
  top: -50px; /* नेविगेशन बार को शीर्ष दृश्य से 50px की दूरी पर छिपाएं */
  width: 100%; /* पूर्ण चौड़ाई */
  transition: top 0.3s; /* स्लाइड के दौरान ट्रांजिशन प्रभाव */
}
/* नेविगेशन बार के लिंक के शैली को सेट करें */
#navbar a {
  float: left;
  display: block;
  रंग: श्वेत;
  text-align: center;
  पैडिंग: 15px;
  text-decoration: none;
}
#navbar a:hover {
  पृष्ठभूमि रंग: #ddd;
  रंग: काला;
}

तीसरा कदम - जावास्क्रिप्ट जोड़ें:

// जब उपयोगकर्ता दस्तावेज़ के शीर्ष से 20px नीचे सरकार करता है, उसे नीचे की ओर स्लाइड करें
// जब उपयोगकर्ता पृष्ठ के शीर्ष पर सरकार करता है, उसे ऊपर की ओर स्लाइड करें (शीर्ष दृश्य से 50px की दूरी पर)
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
  यदि (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
    document.getElementById("navbar").style.top = "0";
  अन्यथा {
    document.getElementById("navbar").style.top = "-50px";
  }
}

स्वयं को प्रयोग करें