CSS position: sticky की भूमिका

position: sticky से स्टिकी नेवबार बनाएं

position: sticky का उपयोग करके एक नेवबार बनाया जा सकता है जो स्क्रॉल करने पर व्यूपोर्ट के शीर्ष पर चिपक जाता है।

उदाहरण

<!DOCTYPE html>
<html>
  <head>
    <style>
      ul {
        list-style-type: none;
        position: sticky;
        overflow: hidden;
        top: 0;
        width: 100%;
      }
      li {
        float: left;
        border-right: 1px solid white;
      }
      li a {
        display: block;
        padding: 8px;
        background-color: orange;
      }
      li:last-child {
        border-right: none;
      }
      div {
        padding:5px;
        margin-top:5px;
        background-color:white;
        height:1000px;
      }
    </style>
  </head>
  <body>
    <ul>
      <li><a href="#home">Home</a></li>
      <li><a href="#news">News</a></li>
      <li><a href="#contact">Contact</a></li>
      <li><a href="#about">About</a></li>
    </ul>
    <div>
      <p>Adding demo text to check fixed menu.</p>
      ... (कई पैराग्राफ स्क्रॉल के लिए)
    </div>
  </body>
</html>

नोट: overflow: hidden <ul> पर फ्लोटेड <li> को क्लियर करने के लिए है। स्टिकी पोजिशनिंग के लिए पैरेंट का ओवरफ्लो visible (डिफ़ॉल्ट) होना चाहिए।