बूटस्ट्रैप - स्थिति का उपयोग कर कॉलम चौड़ाई बनाए रखना: तय?

Question

मैं अपने पृष्ठ पर एक "चिपचिपा" नेविगेशन बनाने की कोशिश कर रहा हूं जहां उपयोगकर्ता को तत्व पर स्क्रॉल करने के बाद position:fixed; प्राप्त होता है। कार्यक्षमता अपेक्षित के रूप में काम कर रही है, लेकिन चिपचिपा वर्ग जोड़े जाने के बाद दो स्तंभों की चौड़ाई जो शीर्ष परिवर्तन तक चिपक जाती हैं। मैंने चिपचिपा तत्व के सीएसएस में width:100%; जोड़ने की कोशिश की, लेकिन फिर तत्व कंटेनर से आगे फैलता है।

मैं कैसे सुनिश्चित कर सकता हूं कि कॉलम चौड़ाई रहें जहां position:fixed; जोड़ा जाना चाहिए?

HMTL:

<div class="container"> 
    <div class="padding"></div> 
    <div class="anchor"></div> 
    <div class="row sticky"> 
     <div class="col-sm-6"> 
      Testing 
     </div> 
     <div class="col-sm-6"> 
      Testing 
     </div> 
    </div> 
    <div class="padding2"></div> 
</div> 

सीएसएस:

.padding { 
    height:250px; 
} 
.padding2 { 
    height:1000px; 
} 
.sticky { 
    background:#000; 
    height:50px; 
    line-height:50px; 
    color:#fff; 
    font-weight:bold; 
} 
    .sticky.stick { 
     position:fixed; 
     top:0; 
     z-index:10000; 
    } 

जे एस:

function stickyDiv() { 
    var top = $(window).scrollTop(); 
    var divTop = $('.anchor').offset().top; 
    if (top > divTop) { 
     $('.sticky').addClass('stick'); 
    } else { 
     $('.sticky').removeClass('stick'); 
    } 
} 

$(window).scroll(function(){ 
    stickyDiv(); 
}); 
stickyDiv(); 

JSFiddle

धन्यवाद!

Answer 1

फिक्स्ड स्थिति शरीर के सापेक्ष है, इसलिए यह शरीर की चौड़ाई से 100% चौड़ाई की गणना करेगा। यदि जावास्क्रिप्ट का उपयोग करना ठीक है, तो आप कंटेनर चौड़ाई प्राप्त करके चिपचिपा चौड़ाई सेट कर सकते हैं। Updated Fiddle

Answer 2

मैं अपने कंटेनर को "कंटेनर-तरल पदार्थ" में सेट करके काम करने में सक्षम था, फिर चौड़ाई जोड़ना: 100%; आपकी .स्टिक कक्षा में।

Answer 3

ऐड:

width:inherit; 

अपने .sticky.stick

JSFiddle

तरह Nanang Mahdaen अल Agun ने कहा, एक निश्चित स्थिति से संबंधित है शरीर के लिए चौड़ाई के। Set width of a "Position: fixed" div relative to parent div

Answer 4

आप कंटेनर के चारों ओर एक 100% चौड़ाई आवरण जोड़ सकते हैं और इसके बजाय उस छड़ी हो सकता है: width:inherit; के साथ यह .container वर्ग

संदर्भ की चौड़ाई का उपयोग करेगा।

<div class="wrap"> 
    <div class="container sticky"> 
     <div class="row"> 
     ... 
     </div> 
    </div> 
</div> 

अद्यतन बेला: https://jsfiddle.net/mileandra/omeegfc7/