"स्थिति: चिपचिपा;" काम नहीं कर रहे सीएसएस और एचटीएमएल

Question

मैं इसे स्क्रॉल करने के बाद नेविगेशन बार स्टिक को शीर्ष पर बनाना चाहता हूं, लेकिन यह काम नहीं कर रहा है और मुझे कोई संकेत नहीं है।

.nav-selections { 
 
     text-transform: uppercase; 
 
     letter-spacing: 5px; 
 
     font: 18px "lato",sans-serif; 
 
     display: inline-block; 
 
     text-decoration: none; 
 
     color: white; 
 
     padding: 18px; 
 
     float: right; 
 
     margin-left: 50px; 
 
     transition: 1.5s; 
 
    } 
 

 
     .nav-selections:hover{ 
 
      transition: 1.5s; 
 
      color: black; 
 
     } 
 

 
    ul { 
 
     background-color: #B79b58; 
 
     overflow: auto; 
 
    } 
 

 
    li { 
 
     list-style-type: none; 
 
    }

<nav style="position: sticky; position: -webkit-sticky;"> 
 
     <ul align="left"> 
 
      <li><a href="#/contact" class="nav-selections" style="margin-right:35px;">Contact</a></li> 
 
      <li><a href="#/about" class="nav-selections">About</a></li> 
 
      <li><a href="#/products" class="nav-selections">Products</a></li> 
 
      <li><a href="#" class="nav-selections">Home</a></li> 
 
     </ul> 
 
    </nav>

Answer 1

स्टिकी स्थिति रिश्तेदार और फिक्स्ड स्थिति के एक संकर है: आप मदद कृपया कर सकते हैं, यहाँ मेरी HTML और सीएसएस कोड है। तत्व को सापेक्ष स्थिति के रूप में माना जाता है जब तक कि यह एक निर्दिष्ट दहलीज को पार न कर लेता है, जिस बिंदु पर इसे निश्चित स्थिति के रूप में माना जाता है।
...
आप चिपचिपा स्थिति अपेक्षा के अनुरूप व्यवहार करने के लिए top कम से कम एक, right, bottom, या left के साथ एक सीमा निर्दिष्ट करना होगा। अन्यथा, यह सापेक्ष स्थिति से अलग नहीं होगा। [source: MDN]

तो अपने उदाहरण में, आप स्थिति जहां यह top संपत्ति का उपयोग करके अंत में रहना चाहिए परिभाषित करने के लिए किया है।

html, body { 
 
    height: 200%; 
 
} 
 

 
nav { 
 
    position: sticky; 
 
    position: -webkit-sticky; 
 
    top: 0; /* required */ 
 
} 
 

 
.nav-selections { 
 
    text-transform: uppercase; 
 
    letter-spacing: 5px; 
 
    font: 18px "lato", sans-serif; 
 
    display: inline-block; 
 
    text-decoration: none; 
 
    color: white; 
 
    padding: 18px; 
 
    float: right; 
 
    margin-left: 50px; 
 
    transition: 1.5s; 
 
} 
 

 
.nav-selections:hover { 
 
    transition: 1.5s; 
 
    color: black; 
 
} 
 

 
ul { 
 
    background-color: #B79b58; 
 
    overflow: auto; 
 
} 
 

 
li { 
 
    list-style-type: none; 
 
}

<nav> 
 
    <ul align="left"> 
 
    <li><a href="#/contact" class="nav-selections" style="margin-right:35px;">Contact</a></li> 
 
    <li><a href="#/about" class="nav-selections">About</a></li> 
 
    <li><a href="#/products" class="nav-selections">Products</a></li> 
 
    <li><a href="#" class="nav-selections">Home</a></li> 
 
    </ul> 
 
</nav>

Answer 2

मेरी टिप्पणी से:

nav { 
 
    position: sticky; 
 
    top: 0; 
 
} 
 

 
.nav-selections { 
 
    text-transform: uppercase; 
 
    letter-spacing: 5px; 
 
    font: 18px "lato", sans-serif; 
 
    display: inline-block; 
 
    text-decoration: none; 
 
    color: white; 
 
    padding: 18px; 
 
    float: right; 
 
    margin-left: 50px; 
 
    transition: 1.5s; 
 
} 
 

 
.nav-selections:hover { 
 
    transition: 1.5s; 
 
    color: black; 
 
} 
 

 
ul { 
 
    background-color: #B79b58; 
 
    overflow: auto; 
 
} 
 

 
li { 
 
    list-style-type: none; 
 
} 
 

 
body { 
 
    height: 200vh; 
 
}

<nav> 
 
    <ul align="left"> 
 
    <li><a href="#/contact" class="nav-selections" style="margin-right:35px;">Contact</a></li> 
 
    <li><a href="#/about" class="nav-selections">About</a></li> 
 
    <li><a href="#/products" class="nav-selections">Products</a></li> 
 
    <li><a href="#" class="nav-selections">Home</a></li> 
 
    </ul> 
 
</nav>

एफएफ और क्रोम की तुलना में अन्य ब्राउज़र के लिए उपयोग करने के लिए polyfill नहीं है। यह एक प्रयोगात्मक नियम है जिसे किसी भी समय ब्राउज़र के माध्यम से कार्यान्वित किया जा सकता है या नहीं। क्रोम इसे दो साल पहले जोड़ता है और फिर इसे छोड़ देता है, ऐसा लगता है ... लेकिन कितनी देर तक? रिश्तेदार + coordonates जबकि एक बार स्क्रॉल चिपचिपा बिंदु पर पहुंच गया अद्यतन, आप अगर माता-पिता तत्वों अतिप्रवाह एक जावास्क्रिप्ट स्क्रिप्ट में इस बारी करने के

Answer 3

चेक चाहते हैं::

निकटतम स्थिति होगा छिपा हुआ; इसे टॉगल करने का प्रयास करें।

यह आपकी स्थिति को प्रभावित कर सकता है: एक बच्चे तत्व पर चिपचिपा।

Answer 4

मुझे एक ही समस्या है, और मुझे जवाब here मिला।

यदि आपका तत्व अपेक्षित रूप से चिपकने वाला नहीं है तो जांच करने वाली पहली चीज़ कंटेनर पर लागू नियम हैं।

विशेष रूप से, माता-पिता पर सेट किए गए किसी भी अतिप्रवाह संपत्ति की तलाश करें। आप तत्व के माता-पिता पर: overflow: hidden, overflow: scroll या overflow: auto का उपयोग नहीं कर सकते।