बूटस्ट्रैप एफ़िक्स नव

Question

ऊपर कूदने के लिए नीचे दिए गए डिव को बूट करता है मैंने स्क्रॉल करने के बाद स्क्रीन के शीर्ष पर एक एनवी रहने के लिए बूटस्ट्रैप के एफ़िक्स फ़ंक्शन का उपयोग करके एक JSFiddle बनाया है और हेडर दृश्य से बाहर निकलता है।

मेरी समस्या यह है कि शुद्ध HTML का उपयोग करते समय, एनएवी के नीचे का पाठ कूदता है और बहुत जल्दी नौसेना के पीछे छिपा रहता है।

समस्याग्रस्त कोड here देखें।

<div class="container"> 
<div class="row"> 
    <div class="span12"> 
     <div class="well"> 
      <h1>Banner</h1> 
     </div> 
    </div> 
</div> 
</div> 
<div class="nav-wrapper"> 
<div class="nav navbar affix" data-spy="affix" data-offset-top="120"> 
    <div class="navbar-inner"> 
     <div class="container"> 
      <div class="span12"> 
       <a class="brand" href="#">My Brand</a> 
       <span class="navbar-text"> 
        This is a navbar. 
       </span> 
      </div>  
     </div> 
    </div> 
</div> 
</div> 
<div class="container"> 
<div class="span3"> 
    <h2>some lorem ipsum for scrolling:</h2> 
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 
</div> 
</div> 

सीएसएस इस प्रकार है::

यहाँ कोड मैं प्रयोग किया जाता है

.affix { 
    position: fixed; 
    top: 0; 
    width: 100% 
} 

मैं एक बहुत ही इसी तरह की समस्या here पाया, लेकिन जब कि उदाहरण के रूप में कोड का उपयोग कर, किसी कारण से यह मेरे लिए काम नहीं करता है।

ऐसा ही किया चाल इस प्रकार है सीएसएस के अतिरिक्त टुकड़ा:

$(function() { 
    $('#nav-wrapper').height($("#nav").height()); 

    $('#nav').affix({ 
     offset: { top: $('#nav').offset().top } 
    }); 
}); 

:

.affix + .container { 
    padding-top:50px 
} 

मैं भी इस तरह के this one here जो वांछित प्रभाव बनाने के लिए निम्नलिखित कोड का उपयोग करता है के रूप में जावास्क्रिप्ट समाधान के बारे में पता कर रहा हूँ

मैं सिर्फ यह पता लगाने की कोशिश कर रहा हूं कि सीएसएस पैडिंग-टॉप फिक्स का उपयोग करते हुए पिछले फिक्स को लागू करते समय मेरा विशेष HTML-only संस्करण क्यों व्यवहार नहीं कर रहा है।

आपकी सहायता के लिए अग्रिम धन्यवाद।

Answer 1

यह काम करने के लिए लगता है:

.nav-wrapper 
{ 
    min-height:50px; 
} 

अपडेट किया गया jsFiddle:http://jsfiddle.net/yYE62/5/

बात ये है कि प्रत्यय प्लगइन .affix वर्ग के साथ तत्व बनाता है दस्तावेज़ में एक तय स्थिति है। यह प्रवाह से चिपकने वाले तत्व को हटा देता है (या लेआउट, यदि आप चाहें) और कंटेनर को पतन का कारण बनता है। जब ऐसा होता है, तो नीचे दी गई सामग्री उस स्थान को भरने के लिए स्लाइड करती है जो चिपकने वाला तत्व कब्जा करने के लिए उपयोग किया जाता है।

उपर्युक्त नियम जोड़कर, आप उस कंटेनर को न्यूनतम ऊंचाई बनाए रखने के लिए बताते हैं चाहे उसकी सामग्री हो या नहीं। यह 50px होना आवश्यक नहीं है; यह .navbar की डिफ़ॉल्ट ऊंचाई है, इसलिए अपनी आवश्यकताओं से मेल खाने के लिए समायोजित करें। यदि आप नहीं चाहते हैं तो सभी.nav-wrapper एस न्यूनतम ऊंचाई रखने के लिए, id असाइन करें और इसके बजाय इसका उपयोग करें।

Answer 2

इसके लिए आपको एक अतिरिक्त रैपर की आवश्यकता है ताकि वह बेकार तरीके से काम कर सके। इसे एक न्यूनतम-ऊंचाई दें जैसा आप एफ़िक्स कर रहे हैं :)