सीएसएस स्थिति चिपचिपा का उपयोग कैसे करें एक साइडबार बूटस्ट्रैप के साथ दिखाई दे रखने के लिए 4

Question

मैं एक दो कॉलम लेआउट इस तरह है:

<div class="row"> 
    <div class="col-xs-8 content"> 
    </div> 
    <div class="col-xs-4"> 
    </div> 
</div> 

अगर मैं साइडबार स्तंभ के लिए position:sticky निर्धारित करते हैं, मैं का चिपचिपा व्यवहार मिलता है साइडबार: https://codepen.io/marcanuy/pen/YWYZEp

सीएसएस:

.sticky { 
    position: sticky; 
    top: 10px; 
} 

HTML:

<div class="row"> 
    <div class="col-xs-8 content"> 
    </div> 
    <div class="col-xs-4 sticky"> 
    </div> 
</div> 

लेकिन जब मैं केवलमेनू कि साइडबार में स्थित है sticky संपत्ति निर्धारित करते हैं, तो संबंधित लेख अनुभाग स्क्रॉल सामान्य रूप से और मेनू div साथ चिपचिपा व्यवहार हो जाता है, यह काम नहीं करता:

<div class="row"> 
    <div class="col-xs-8 content"> 
    </div> 
    <div class="col-xs-4"> 
     <div class="menu sticky"> 
     </div> 
    </div> 
</div> 

यह स्क्रॉल एक चिपचिपा व्यवहार के साथ पूरे साइडबार पहला उदाहरण के स्क्रीनकास्ट है, और फिर मेनू में चिपचिपा संपत्ति को बदलने वह काम नहीं करता:

बूटस्ट्रैप 4 recommendsचिपचिपा Affix jQuery प्लगइन के लिए गिरा दिया समर्थन के रूप में संपत्ति:

Affix jQuery प्लगइन हटा दिया जाना। हम एक स्थिति का उपयोग करने की सलाह देते हैं: इसके बजाय चिपचिपा पॉलीफिल।

मैं में इसका परीक्षण किया है: experimental Web Platform featureschrome://flags

में सक्षम के साथ about:config

क्रोम 50.0.2661.94 (64-बिट) के तहत

• फ़ायरफ़ॉक्स css.sticky.enabled=“true” साथ 47.0

  (यह How to make a sticky sidebar in Bootstrap? bec का डुप्लिकेट नहीं है ause है कि एक बी एस चिपका का उपयोग कर)

Answer 1

मैंने flexbox सक्षम करने का हल किया। बूटस्ट्रैप के Github भंडार में कोई समस्या उठाकर बाद मैं द्वारा एक जवाब मिल गया एक बूटस्ट्रैप member:

.col-XS-4 .col-XS-8 के रूप में लंबा नहीं है, इसलिए वहाँ मूल रूप से कोई अंतरिक्ष मेनू के लिए चिपचिपापन के अंदर "फ्लोट" करने के लिए। .col-xs-4 लंबा बनाएं और चीजें ठीक काम करें: https://codepen.io/anon/pen/OXzoNJ यदि आप हमारे ग्रिड सिस्टम के फ्लेक्सबॉक्स संस्करण को सक्षम करते हैं ($ enable-flex: true के माध्यम से ;), आपको स्वचालित बराबर-ऊंचाई कॉलम मुफ्त में मिलता है, जो आपके मामले में आसान होता है।

Answer 2

Polyfill explanation.

आपको इसका इस्तेमाल करने में जे एस polyfill शामिल करने की ज़रूरत है।polyfills बूटस्ट्रैप पृष्ठ पर लिंक की सिफारिश कर रहे हैं

• https://github.com/wilddeer/stickyfill
• https://github.com/filamentgroup/fixed-sticky

यहाँ है एक अद्यतन codepen: https://codepen.io/anon/pen/zBpNRk

मैं आवश्यक polyfill (मैं stickyfill प्रयुक्त) शामिल है और इसे

var stickyElements = document.getElementsByClassName('sticky'); 

for (var i = stickyElements.length - 1; i >= 0; i--) { 
    Stickyfill.add(stickyElements[i]); 
} 

के साथ बुलाया गया

पुस्तकालय आप अपने सीएसएस

.sticky { 
    position: -webkit-sticky; 
    position: sticky; 
    top: 0; 
} 
.sticky:before, 
.sticky:after { 
    content: ''; 
    display: table; 
} 

के लिए इसका उपयोग और अंत में आप div आदेश को मिलाया था सुझाव दिया। आपको div को पूरी पंक्ति के बाहर चिपचिपा वर्ग के साथ रखना होगा, इसलिए मैंने शेष पंक्ति को <div class="col-xs-6"></div> से खाली कर दिया है जो खाली है।

Answer 3

जवाब @wrldbt द्वारा 4 अल्फा 5 bootstrap अप करने के लिए काम करता है, लेकिन अल्फा 6 में -xs इन्फ़िक्स गिरा दिया गया है और ग्रिड फिर से लिखा गया है।

मैंने बूटस्ट्रैप & के वर्तमान संस्करण के साथ काम करने वाले कुछ क्लीनर को एक साथ रखा, फ्लेक्सबॉक्स का उपयोग करके एक चिपचिपा पाद लेख भी शामिल किया।

https://codepen.io/cornex/pen/MJOOeb

Answer 4

स्थिर बूटस्ट्रैप 4.0.0 रिहाई, इस sticky-top वर्ग का उपयोग किया जाता है ...

Demo

<div class="container"> 
    <nav class="navbar navbar-light bg-light navbar-expand"> 
     <a class="navbar-brand" href="#">Header</a> 
     ... 
    </nav> 
    <div class="row"> 
     <div class="col-8 content"> 
      Content 
     </div> 
     <div class="col-4"> 
      <div class="sticky-top"> 
       <h4>Sticky menu</h4> 
       ... 
      </div> 
     </div> 
    </div> 
    <div class="footer"> 
     ... 
    </div> 
</div> 

यह भी की ऊंचाई में काम करता है हेडर/navbar, सामग्री, और पाद लेख गतिशील/अज्ञात हैं।

https://www.codeply.com/go/QJogUAHIyg