कैसे बनाएं: रोलिंग के दौरान फिक्स्ड शीर्षक

रोलिंग के दौरान स्टिकी शीर्षक बनाएं

पहला कदम - HTML जोड़ें：

<div class="header" id="myHeader">
  <h2>My Header</h2>
</div>

दूसरा कदम - CSS जोड़ें：

.header {
  position: sticky;
  top: 0;
  padding: 10px 16px;
  background: #555;
  color: #f1f1f1;
}

खुद आज्ञा करें

एलीमेंट को position: sticky; बाद में, उसकी स्थिति उपयोगकर्ता की रोलिंग स्थिति के अनुसार निर्धारित करता है。

स्टिकी एलीमेंट रोलिंग की स्थिति के अनुसार अपेक्षित लोकेशन तक आगे बढ़ने से पहले अपेक्षित स्थिति तक रिलेटिव लोकेशन बनाए रखता है; उसके बाद वह स्थिति में "स्टिकी" हो जाता है (जैसा कि position: fixed ऐसा ही है)।

ध्यान देंःअगर आपको लगाने के लिए स्टिकी लोकेशन कार्य करना है, तो आपको कम से कम एक विनिर्दिष्ट करना होगा top、right、bottom या left 中的一个。

संबंधित पृष्ठ

तत्वज्ञान:CSS position