"स्थिति: चिपचिपा" सीएसएस और HTML काम नहीं कर रहा

Question

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

.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>

Comments

स्थिति: चिपचिपे को एक निर्देशांक की आवश्यकता होती है जहाँ छड़ी करना चाहिए

— G-Cyrillus

आपको मूल तत्वों से भी सावधान रहना होगा। position: stickyकाम करना बंद कर सकते हैं अगर यह एक फ्लेक्सबॉक्स के अंदर है जब तक कि आप सावधान न हों और यह भी विफल हो जाएगा अगर इसमें overflow: hiddenया इसके overflow: autoबीच और जो कुछ भी इसे अंदर स्क्रॉल करता है (शरीर की जड़ या निकटतम पूर्वज अतिप्रवाह के साथ: स्क्रॉल)

— user56reinstatemonica8

@ User56reinstatemonica8 OMG thankkkkyou तो मेरे बारे में बताने के लिए ज्यादा overflow: hiddenऔर overflow: auto! मैं इस काम को पाने के लिए दिन

— रात

Answer 1

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

इसलिए आपके उदाहरण में, आपको उस स्थिति को परिभाषित करना होगा जहां यह 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>

Comments

सामान्य तौर पर, यह जवाब काम करने के लिए पर्याप्त नहीं है, माता-पिता के पास भी अधिक संपत्ति नहीं होनी चाहिए।

— विल्लीसएल

आपकी टिप्पणी के लिये धन्यवाद। मैं आपसे सहमत हूं कि ओपी के अलावा अन्य उदाहरणों के लिए मेरा उत्तर पर्याप्त नहीं हो सकता है। अन्य उत्तर इस ओर इशारा करते हैं :)

— मार्विन

मुझे लगता है कि ट्रिक यह है कि पोजीशन स्टिकी केवल उन्हीं बच्चों पर लागू की जा सकती है जो एक ज्ञात ऊंचाई के साथ स्क्रॉल करने योग्य माता-पिता के हैं, (फ्लेक्सबॉक्स में प्रत्यक्ष बच्चों के पास एक ऐसी ऊँचाई होती है, जिसकी गणना अन्य फ्लेक्स-आइटम से की जाती है)

— कोड

@ViliusL आपकी टिप्पणी के लिए धन्यवाद! यही वह समस्या थी जिसकी मुझे स्थिति थी: चिपचिपा, मुझे नहीं पता होता कि अगर आपके लिए यह जानकारी मुझे कहीं भी नहीं मिली।

— पिओटर स्ज़लागुरा

चिपचिपा स्थिति में अतिप्रवाह संपत्ति के साथ माता-पिता नहीं होना चाहिए, कुछ वेब ब्राउज़रों में भी चिपचिपा का समर्थन नहीं किया जाता है

— रोहन शेनॉय

Answer 2

जांचें कि क्या किसी पूर्वज तत्व का ओवरफ्लो सेट (जैसे overflow:hidden) है; इसे भीख माँगने का प्रयास करें। आपको अपनी अपेक्षा से अधिक DOM ट्री ऊपर जाना पड़ सकता है =)।

यह आपके position:stickyवंश पर असर डाल सकता है ।

Comments

काश मैं तुम्हें कई बार upvote कर सकता! इसने मुझे बार-बार काटने की अपेक्षा स्वीकार किया है।

— अलेक्जेंडर वरविज्क

यह सही जवाब है। हालांकि, यह पता लगाना मुश्किल हो सकता है कि कौन सा मूल तत्व समस्या पैदा कर रहा है। मैंने माता-पिता पर अतिप्रवाह संपत्ति की पहचान करने में मदद करने के लिए एक jquery स्क्रिप्ट लिखी, जिसने समस्या की पहचान की (बस इसे अपने कंसोल में चलाएं)। क्योंकि स्क्रिप्ट कुछ पंक्तियाँ हैं, जिनका उत्तर मैंने नीचे दी गई स्क्रिप्ट से जोड़ा है।

— danday74

मैं आपके "मूल तत्वों

— che-azeh

मैं "s" भी चूक गया :( और यह मुद्दा था। कई जगह लोग लिखते हैं कि आपको केवल माता-पिता ही नहीं, सभी माता-पिता की जांच करनी चाहिए। मैंने पाया कि $(stickyElement).parents().css("overflow", "visible")वेब कंसोल में कॉल करने से मेरी समस्या जांचने में मदद मिलेगी और यह हुआ। overflow:hiddenशैली के साथ दूर के माता-पिता, जो समस्या का कारण बने। काश, मैं इस उत्तर को और ध्यान से पढ़ता।

— Mariusz Pawelski

यदि आपको जांच की आवश्यकता है overflow:hidden, तो आप अपने स्क्रिप्ट कंसोल में दिए गए तत्व के सभी माता-पिता / पूर्वजों की जांच करने के लिए अपने ब्राउज़र कंसोल में चला सकते हैं: gist.github.com/brandonjp/478cf6e32d90ab9cb2cd8bb0799c7a7

— brandonjp

Answer 3

मैं एक ही समस्या है, और मैं यहाँ जवाब मिला ।

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

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

Comments

यह सही उत्तर भी है, लेकिन मेरा उत्तर भी देखें जो समस्या पैदा करने वाले माता-पिता को आसानी से पहचानने में मदद करता है।

— danday74

आप न केवल निकटतम पैरेंट कंटेनर लेकिन सभी पेरेंट तत्व की जाँच करनी चाहिए रों ।

— मारिअस पावेल्स्की

हां, मेरा जवाब बिल्कुल ऐसा करने के लिए देखें और सभी माता-पिता को बहुत जल्दी

— जांचें

लिंक ने मेरी भी मदद की। मेरी समस्या "द्वारा हल की गई थी ... यदि आप अतिप्रवाह का उपयोग नहीं कर रहे हैं और अभी भी समस्या हो रही है, तो यह जाँचने योग्य है कि क्या ऊँचाई माता-पिता पर सेट है ..."

— xenetics

जीवन रक्षक, समस्या का वास्तव में सरल वर्णन, लेकिन क्या इस जिज्ञासु के आस-पास कोई काम है

— राहुल सिंह

Answer 4

कुछ और चीजें जो मैं देख चुका हूँ:

जब आपका चिपचिपा तत्व एक घटक (कोणीय आदि) है

• यदि 'चिपचिपा' तत्व स्वयं एक कस्टम तत्व-चयनकर्ता के साथ एक घटक है, जैसे कि कोणीय घटक जिसका नाम <app-menu-bar>आपको घटक के सीएसएस में निम्नलिखित जोड़ना होगा:

  :host { display: block; }   

  या

  app-menu-bar  { display: block; }   // (in the containing component's css)

  विशेष रूप से आईओएस पर सफारी को कोणीय अनुप्रयोग display:blockके मूल तत्व पर भी आवश्यकता होती है app-rootया यह छड़ी नहीं करेगा।

• आप एक घटक बनाने और घटक के अंदर सीएसएस को परिभाषित कर रहे हैं (शैडो डोम / समझाया शैलियों), सुनिश्चित करें कि position: sticky'बाहरी' चयनकर्ता के लिए लागू किया जा रहा है (उदाहरण के लिए। app-menu-barDevTools में चिपचिपा स्थिति दिखाना चाहिए) और नहीं एक शीर्ष स्तर div के भीतर घटक। कोणीय के साथ, यह :hostआपके घटक के लिए सीएसएस में चयनकर्ता के साथ प्राप्त किया जा सकता है ।

  :host
  {
      position: sticky;
      display: block;   // this is the same as shown above
      top: 0;
      background: red;    
  }

अन्य

• यदि आपके चिपचिपे तत्व का अनुसरण करने वाले तत्व की एक ठोस पृष्ठभूमि है, तो आपको इसे नीचे फिसलने से रोकने के लिए निम्नलिखित जोड़ना चाहिए:

  .sticky-element { z-index: 100; }
  .parent-of-sticky-element { position: relative; }

• यदि उपयोग कर रहे हैं topऔर उपयोग करने के बाद आपका चिपचिपा तत्व पहले (आपकी सामग्री से पहले) होना चाहिए bottom।

• overflow: hiddenआपके आवरण तत्व का उपयोग करते समय जटिलताएं होती हैं - सामान्य रूप से यह अंदर चिपचिपा तत्व को मार देगा। इस प्रश्न में बेहतर बताया गया है

• ऑनस्क्रीन कीबोर्ड दिखाई देने पर मोबाइल ब्राउज़र चिपचिपे / नियत किए गए आइटम को अक्षम कर सकते हैं। मैं सटीक नियमों के बारे में निश्चित नहीं हूं (कोई भी कभी भी जानता है) लेकिन जब कीबोर्ड दिखाई देता है तो आप एक तरह की 'विंडो' को खिड़की में देख रहे होते हैं और आप आसानी से चीजों को चिपका नहीं पाएंगे। स्क्रीन के वास्तविक दृश्यमान शीर्ष।

• आप सुनिश्चित करें कि आपके पास:

  position: sticky;

  और नहीं

  display: sticky;

विविध प्रयोज्य चिंताएँ

• अगर आपका डिज़ाइन मोबाइल डिवाइस पर स्क्रीन के निचले भाग में चीजों को चिपकाने के लिए कहता है, तो सतर्क रहें। उदाहरण के लिए iPhone X पर वे स्वाइप क्षेत्र (होमपेज पर वापस आने के लिए) को इंगित करने के लिए एक संकीर्ण रेखा प्रदर्शित करते हैं - और इस क्षेत्र के अंदर के तत्व क्लिक करने योग्य हैं। इसलिए यदि आप कुछ छड़ी करते हैं तो iPhone X पर परीक्षण करना सुनिश्चित करें कि उपयोगकर्ता इसे सक्रिय कर सकते हैं। एक बड़ा 'अब खरीदें' बटन अच्छा नहीं है अगर लोग इसे क्लिक नहीं कर सकते हैं!
• यदि आप फेसबुक पर विज्ञापन कर रहे हैं तो वेबपेज फेसबुक के मोबाइल एप के भीतर 'वेबव्यू' नियंत्रण में प्रदर्शित होता है। विशेष रूप से वीडियो प्रदर्शित करते समय (जहां आपकी सामग्री केवल स्क्रीन के निचले आधे हिस्से में शुरू होती है) - वे अक्सर आपके पृष्ठ को स्क्रॉल करने योग्य व्यूपोर्ट में डालकर पूरी तरह से गड़बड़ कर देते हैं जो वास्तव में आपके चिपचिपे तत्वों को पृष्ठ के शीर्ष से गायब करने की अनुमति देता है। एक वास्तविक विज्ञापन के संदर्भ में परीक्षण करना सुनिश्चित करें और न केवल फोन के ब्राउज़र या यहां तक ​​कि फेसबुक के ब्राउज़र में भी, जो सभी अलग-अलग व्यवहार कर सकते हैं।

Comments

@ सेरी मैं बिल्कुल स्पष्ट नहीं हूं कि सफारी में कौन सा सही व्यवहार करता है display: blockऔर position: relativeट्रिगर करता है - क्या ऐसा लगता है कि केवल display: blockजरूरत थी? बेशक यह शायद दोनों को निर्दिष्ट करने के लिए चोट नहीं करता है

— शमौन_वेअर

बस display: blockपर्याप्त था

— सर्गेई

Answer 5

यह MarsAndBack और Miftah Mizwar के उत्तरों की एक निरंतरता है।

उनके उत्तर सही हैं। हालांकि, समस्या पूर्वज (ओं) को पहचानना मुश्किल है।

इसे बहुत सरल बनाने के लिए, बस अपने ब्राउज़र कंसोल में इस jQuery स्क्रिप्ट को चलाएं और यह आपको प्रत्येक पूर्वज पर अतिप्रवाह संपत्ति का मूल्य बताएगा।

$('.your-sticky-element').parents().filter(function() {
    console.log($(this));
    console.log($(this).css('overflow'));
    return $(this).css('overflow') === 'hidden';
});

जहाँ पूर्वज overflow: visibleअपने CSS को नहीं बदलते हैं ताकि वह ऐसा करे!

इसके अलावा, जैसा कि कहीं और कहा गया है, सुनिश्चित करें कि आपका चिपचिपा तत्व सीएसएस में है:

.your-sticky-element {
    position: sticky;
    top: 0;
}

Comments

यह बहुत मददगार था। मैं उस मूल तत्व को जल्दी से पहचानने में सक्षम था जिसका मूल्य था overflow: invisible।

— डेविड ब्राउनर

यदि आपके पास अपने पेज पर jQuery नहीं है, तो आप इसे जोड़ने के लिए कंसोल में इस छोटे स्निपेट को चला सकते हैं: (async function() { let response = await fetch('https://code.jquery.com/jquery-3.3.1.min.js'); let script = await response.text(); eval(script); })();

— magikMaker

: आप भी इस टुकड़ा है कि JQuery गैर "दृश्यमान" अतिप्रवाह माता पिता को खोजने के लिए की आवश्यकता नहीं है चला सकते हैं var p = $0.parentElement; while(p != null) { var ov = getComputedStyle(p).overflow; if(ov !== 'visible') console.warn(ov, p); else console.log(ov, p); p = p.parentElement; }कहाँ $0है पिछले तत्व डेवलपर उपकरण में चयन किया।

— मरिअस पावेल्स्की

Answer 6

मुझे इसे काम करने के लिए निम्नलिखित CSS का उपयोग करना पड़ा:

.parent {
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    overflow: visible;
}

.sticky {
    position: sticky;
    position: -webkit-sticky;
    top: 0;
}

अगर ऊपर काम नहीं है तो ...

सभी पूर्वजों के माध्यम से जाओ और सुनिश्चित करें कि इनमें से कोई भी तत्व नहीं है overflow: hidden। आपको इसे बदलना होगाoverflow: visible

Comments

प्रदर्शन: फ्लेक्स बात बनाता है

— MaciejLisCK

Answer 7

समझें कि आप इस पार आ गए हैं और आपका चिपचिपा काम नहीं कर रहा है - माता-पिता को सेट करने का प्रयास करें:

display: unset

मेरे लिए काम किया

Comments

यही तो है वो।

— मिमी -93

ओह! यह उस मामले के लिए एक काम के आस-पास लगता है कि एक मूल तत्व की एक सीमित ऊंचाई होती है (जैसे कि एक नेवबर कंटेनर या कुछ और, पूरे शरीर या पृष्ठ कंटेनर के विपरीत) - ऐसा लगता है कि चिपचिपे उनके बाहर स्क्रॉल करना पसंद नहीं करते हैं माता-पिता (जो पूरी तरह से हास्यास्पद है!) अब हर किसी को बस इतना भाग्यशाली होने की आवश्यकता है कि माता-पिता को स्थापित करने में सक्षम होने के लिए display: unset, जो हमेशा तुरंत व्यवहार्य नहीं हो सकता है

— बेन फिलिप

इसके साथ ( contents, initial?) औरinline

— बेन फिलिप

Answer 8

मजेदार क्षण जो मेरे लिए स्पष्ट नहीं था: position: stickyयदि आपने इसे DevTools का उपयोग करके सेट किया है, तो कम से कम Chrome 70 में लागू नहीं किया गया है।

Comments

क्या आपके पास इसके लिए कोई स्रोत है, या कोई अन्य जानकारी है कि इसके चारों ओर कैसे काम किया जाए?

— एजेन्संसफील्ड

Answer 9

ऐसा लगता है कि चिपके रहने वाले नेवबार किसी भी अन्य सामग्री के साथ किसी भी विभाग या अनुभाग के अंदर नहीं होना चाहिए। कोई भी हल तब तक मेरे लिए काम नहीं कर रहा था जब तक कि मैं नेवबार को उस डिव से बाहर नहीं ले गया था, जिसे नब्बर ने एक अन्य टॉपबार के साथ साझा किया था। मैंने पहले टॉपर और नबार ने एक आम डिव के साथ लिपटा था।

Comments

धन्यवाद, यह वही था जिसकी मुझे तलाश थी! मेरे लिए कोई माता-पिता अतिप्रवाह के साथ नहीं थे, न ही कोई ऊंचाई के मुद्दे थे। इस जानकारी को स्वीकृत उत्तर में भी देखना अच्छा होगा।

— saglamcem

मुझे अभी-अभी प्रयोग के माध्यम से पता चला है कि चिपचिपा अपने मूल तत्व के बाहर स्क्रॉल नहीं करेगा। यह बहुत मायने नहीं रखता है कि कितने अन्य भाई-बहन हैं, लेकिन इसके माता-पिता, जाहिरा तौर पर, एक नेवबर कंटेनर नहीं हो सकते हैं, लेकिन एक पृष्ठ / सामग्री कंटेनर के स्तर पर कुछ होना चाहिए :( यह हास्यास्पद है

— बेन फिलिप

लेकिन लो! यदि आप कर सकते हैं, यदि आप सीमित माता-पिता को सेट करते हैं, तो display: unsetयह प्रतिबंध हटा दिया गया है! देखें stackoverflow.com/a/60560997/2902367 साथ काम करने के लिए भी लगता है contents, initial(?) औरinline

— बेन फिलिप

Answer 10

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

position:sticky जहां छड़ी करने के लिए tel के लिए एक निर्देशांक की आवश्यकता होती है

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>

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

निकटतम स्थिति होगी: यदि आप इसे एक जावास्क्रिप्ट स्क्रिप्ट में बदलना चाहते हैं, तो एक बार स्क्रॉल करने के दौरान स्क्रॉल करते समय रिश्तेदार + निर्देशांक अपडेट किए जाते हैं

Answer 11

मुझे पता है कि यह पहले से ही उत्तर दिया जा रहा है, लेकिन मैं एक विशिष्ट मामले में भाग गया, और मुझे लगता है कि अधिकांश उत्तर बिंदु को याद करते हैं।

overflow:hiddenजवाब मामलों के 90% को कवर किया। यह कमोबेश "स्टिकी नेवी" परिदृश्य है।

लेकिन चिपचिपा व्यवहार एक कंटेनर की ऊंचाई के भीतर सबसे अच्छा उपयोग किया जाता है। अपनी वेबसाइट के दाहिने कॉलम में एक न्यूज़लेटर फॉर्म के बारे में सोचें जो पेज के साथ नीचे स्क्रॉल करता है। यदि आपका चिपचिपा तत्व कंटेनर का एकमात्र बच्चा है, तो कंटेनर बिल्कुल उसी आकार का है, और स्क्रॉल करने के लिए कोई जगह नहीं है।

आपके कंटेनर को आपके द्वारा स्क्रॉल किए जाने वाले तत्व की अपेक्षा की जानी चाहिए। मेरे "राइट कॉलम" परिदृश्य में बाएं कॉलम की ऊंचाई कितनी है। इसे प्राप्त करने का सबसे अच्छा तरीका display:table-cellस्तंभों पर उपयोग करना है। यदि आप नहीं कर सकते हैं, और float:rightजैसे मैं के साथ अटक गया है, तो आपको या तो जावास्क्रिप्ट के साथ गणना के बाएं कॉलम की ऊंचाई का अनुमान लगाना होगा।

Comments

"यदि आपका चिपचिपा तत्व कंटेनर का एकमात्र बच्चा है, तो कंटेनर बिल्कुल उसी आकार का है, और स्क्रॉल करने के लिए कोई जगह नहीं है।" सोना!!! धन्यवाद!

— मार्क जैक्सन

हाँ! मुझे यह पता लगाने के लिए कुछ समय लगा। मुझे पहली बार में यह एक हास्यास्पद प्रतिबंध लगा, लेकिन मुझे लगता है कि इसके लिए कम से कम विकल्प होना चाहिए । मैं बहुत कुछ पसंद करूंगा sticky-limit: parent, sticky-limit: bodyया sticky-limit: nth-parent(3)... वैसे भी: यदि आप कर सकते हैं, तो आप इस सीमा को उठा सकते हैं, सीमित माता-पिता को सेट करके display: unset, जैसा कि stackoverflow.com/a/60560997/2902367 में दिया गया है । इसके साथ काम करने के लिए भी लगता है contents, initial(?) औरinline

— बेन फिलिप

Answer 12

मुझे पता है यह एक पुरानी पोस्ट है। लेकिन अगर मेरे जैसा कोई है जो हाल ही में स्थिति के साथ खिलवाड़ करना शुरू कर दिया है: तो यह उपयोगी हो सकता है।

मेरे मामले में मैं स्थिति का उपयोग कर रहा था: एक ग्रिड-आइटम के रूप में चिपचिपा। यह काम नहीं कर रहा था और समस्या एक अतिप्रवाह-एक्स थी: htmlतत्व पर छिपी हुई । जैसे ही मैंने उस संपत्ति को हटाया, यह ठीक काम किया। अतिप्रवाह-एक्स होने: bodyतत्व पर छिपा हुआ काम करने के लिए लग रहा था, पता नहीं क्यों अभी तक।

Answer 13

यहाँ दो उत्तर:

1. टैग overflowसे संपत्ति निकालेंbody

2. के साथ समस्या को ठीक height: 100%करने के bodyलिए सेटoverflow-y: auto

min-height: 100% इसके बजाय काम नहीं कर रहा है height: 100%

Answer 14

मेरा मानना ​​है कि यह लेख कैसे stickyकाम करता है के बारे में बहुत कुछ कहता है

कैसे सीएसएस स्थिति स्टिकी वास्तव में काम करता है! सीएसएस स्थिति चिपचिपा दो मुख्य भागों, चिपचिपा आइटम और चिपचिपा कंटेनर है ।

स्टिकी आइटम  - वह तत्व है जिसे हमने स्थिति के साथ परिभाषित किया है: स्टिकी स्टाइल। तत्व तब फ्लोट करेगा जब व्यूपोर्ट की स्थिति उदाहरण की स्थिति से मेल खाती है, उदाहरण के लिए top: 0px:।

चिपचिपा कंटेनर- HTML तत्व जो चिपचिपा आइटम लपेटता है। यह अधिकतम क्षेत्र है जिसमें चिपचिपा आइटम अंदर तैर सकता है।

जब आप किसी तत्व को स्थिति के साथ परिभाषित करते हैं: तो आप अपने आप को मूल तत्व को एक चिपचिपे कंटेनर के रूप में परिभाषित कर रहे हैं!

Answer 15

एक चिपचिपा तत्व का वास्तविक व्यवहार है:

• पहले यह कुछ समय के लिए सापेक्ष होता है
• फिर इसे कुछ समय के लिए ठीक किया जाता है
• अंत में, यह दृश्य से गायब हो जाता है

एक स्थिर रूप से तैनात तत्व को अपेक्षाकृत तब तक माना जाता है जब तक कि उसके ब्लॉक को एक निर्दिष्ट सीमा (जैसे कि ऑटो के अलावा अन्य मूल्य के लिए शीर्ष स्थापित करना) पार कर जाता है (इसकी कंटेनर के भीतर स्क्रॉल करता है), जिस बिंदु पर इसे "अटक" माना जाता है। "तब तक जब तक कि इसके ब्लॉक के विपरीत किनारे को पूरा न किया जाए।

तत्व को दस्तावेज़ के सामान्य प्रवाह के अनुसार तैनात किया जाता है, और फिर उसके निकटतम स्क्रॉलिंग पूर्वज और ब्लॉक (निकटतम ब्लॉक-स्तरीय पूर्वज) के सापेक्ष ऑफसेट, तालिका-संबंधित तत्वों सहित, शीर्ष, दाएं, नीचे, के मूल्यों के आधार पर और चला गया। ऑफसेट किसी भी अन्य तत्वों की स्थिति को प्रभावित नहीं करता है।

यह मान हमेशा एक नया स्टैकिंग संदर्भ बनाता है। ध्यान दें कि एक चिपचिपा तत्व "स्टिक" अपने निकटतम पूर्वज के पास होता है जिसमें "स्क्रॉलिंग तंत्र" होता है (निर्मित जब अतिप्रवाह छिपा होता है, स्क्रॉल, ऑटो या ओवरले), भले ही वह पूर्वज वास्तव में स्क्रॉल पूर्वज न हो।

यह उदाहरण आपको समझने में मदद करेगा:

code https://codepen.io/darylljann/pen/PpjwPM

Answer 16

अगर danday74 का फिक्स काम नहीं करता है, तो जांच लें कि मूल तत्व की ऊंचाई है।

मेरे मामले में मेरे पास दो चिल्ड थे, एक फ्लोटिंग लेफ्ट और एक फ्लोटिंग राइट था। मैं चाहता था कि सही फ़्लोटिंग एक चिपचिपा हो जाए, लेकिन <div style="clear: both;"></div>इसे ऊंचाई देने के लिए माता-पिता के अंत में जोड़ना पड़ा ।

Comments

यह पता लगाएं कि यह किसी के द्वारा अस्वीकृत क्यों हो गया, लेकिन यह मेरा मामला बिल्कुल सही था: मैंने float:leftमूल तत्व में जोड़ा (फ्लोट के बिना इसकी ऊंचाई 0 थी) और position:stickyकाम किया।

— एसेक्स

Answer 17

मैंने JS समाधान का उपयोग किया। यह फ़ायरफ़ॉक्स और क्रोम में काम करता है। कोई समस्या, मुझे बताएं।

एचटीएमएल

<body>
  <header id="header">
    <h1>Extra-Long Page Heading That Wraps</h1>
    <nav id="nav">
      <ul>
        <li><a href="" title="">Home</a></li>
        <li><a href="" title="">Page 2</a></li>
        <li><a href="" title="">Page 3</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <p><!-- ridiculously long content --></p>
  </main>
  <footer>
    <p>FOOTER CONTENT</p>
  </footer>
  <script src="navbar.js" type="text/javascript"></script>
</body>

सीएसएस

nav a {
    background: #aaa;
    font-size: 1.2rem;
    text-decoration: none;
    padding: 10px;
}

nav a:hover {
    background: #bbb;
}

nav li {
    background: #aaa;
    padding: 10px 0;

}

nav ul  {
    background: #aaa;
    list-style-type: none;
    margin: 0;
    padding: 0;

}

@media (min-width: 768px) {

    nav ul {
        display: flex;
    }
}

js

function applyNavbarSticky() {
    let header = document.querySelector('body > header:first-child')
    let navbar = document.querySelector('nav')
    header.style.position = 'sticky'

    function setTop() {
        let headerHeight = header.clientHeight
        let navbarHeight = navbar.clientHeight
        let styleTop = navbarHeight - headerHeight

        header.style.top = `${styleTop}px`
    }

    setTop()

    window.onresize = function () {
        setTop()
    }
}

Answer 18

z-indexयह भी बहुत महत्वपूर्ण है। कभी-कभी यह काम करेगा लेकिन आप इसे नहीं देखेंगे। यह सुनिश्चित करने के लिए इसे कुछ उच्च संख्या में सेट करने का प्रयास करें। हमेशा ऐसा न करें, top: 0लेकिन अगर वह कहीं छिपा हुआ है (टूलबार के तहत) तो उसमें कुछ अधिक करने की कोशिश करें।

Answer 19

यहाँ है कि मुझे क्या करना है ... मेरी चिपचिपा div एक और div के अंदर थी, ताकि माता-पिता को चिपचिपा div के बाद कुछ अतिरिक्त सामग्री की आवश्यकता हो, ताकि माता-पिता को चिपचिपा div "स्लाइड ओवर" के लिए अन्य सामग्री के रूप में "लंबा पर्याप्त" बना सकें। आप नीचे स्क्रॉल करें।

तो मेरे मामले में, चिपचिपा div के बाद, मुझे जोड़ना पड़ा:

    %div{style:"height:600px;"} 
       

(मेरे एप्लिकेशन में दो साइड-बाय-डिव हैं, बाईं ओर "लंबा" चित्र है, और दाईं ओर एक छोटा डेटा प्रविष्टि फ़ॉर्म है, और मैं चाहता था कि डेटा प्रविष्टि फ़ॉर्म छवि के बगल में फ़्लोट करें जैसे कि आप नीचे स्क्रॉल करते हैं, इसलिए फ़ॉर्म हमेशा स्क्रीन पर होता है। यह तब तक काम नहीं करेगा जब तक मैं उपरोक्त "अतिरिक्त सामग्री" को नहीं जोड़ता, इसलिए चिपचिपा div में "स्लाइड ओवर" के लिए कुछ है।

Answer 20

यह सच है कि है overflowकी जरूरत है हटा दिया है या करने के लिए स्थापित किया जाना initialसुनिश्चित करने के लिए position: stickyचाइल्ड तत्व पर काम करता है। मैंने अपने Angular ऐप में मटीरियल डिज़ाइन का इस्तेमाल किया और पाया कि कुछ मटेरियल कंपोनेंट्स ने overflowवैल्यू बदल दी । मेरे परिदृश्य के लिए ठीक है

mat-sidenav-container, mat-sidenav-content {
  overflow: initial;
}