ट्विटर बूटस्ट्रैप स्क्रॉल करने के बाद नेविबार को ठीक करें

Question

मेरे पास एक एनवी-बार है जो लोड के पृष्ठ से लगभग 200px पर शुरू होता है। जैसे ही मैं नीचे स्क्रॉल करता हूं, मैं चाहता हूं कि एनवी-बार पृष्ठ के शीर्ष पर "एफ़िक्स" हो और मैं बाकी सामग्री के माध्यम से स्क्रॉल कर सकूं। मैं नौसेना बार को शीर्ष पर 200px के बावजूद जगह में रहने में सक्षम हूं, और यह उस सामग्री को अनदेखा करता है जिसे मैंने सही खींच लिया है और इसे बाईं ओर खींचता है। मुझे यह सुनिश्चित करने की ज़रूरत है कि navbar दिखाई दे रहा है और लेआउट/शैली पूरी तरह से एक ही रास्ता है।

अपडेट:: खेद

नीचे मेरी jsfiddle से पता चलता है जो मैं क्या

<!-- Begin Logo/Search --> 
    <header class="masthead"> 
     <div class="row"> 
     <div class="span6"> 
      <div class="logo pull-left"> 
       <h1><a href="/">name</a></h1> 
      </div> 
     </div> 
     <div class="span6"> 
      <div class="pull-right hidden-phone"> 
       <form class="search" action="/search" id="site-search"> 
        <input type="hidden" name="records" value="6"> 
        <div class="input-append"> 
         <input type="text" name="q" class="search_box" placeholder="Search" value="" autocomplete="off" /> 
         <button class="btn" type="submit"><i class="icon-search"></i></button> 
        </div> 
       </form>  
      </div> 
     </div> 
     </div> 
    </header>   


    <!-- Begin Navbar --> 
    <div> 
    <div class="navbar navbar-static"> 
     <div class="navbar-inner" id="mastnav"> 
     <div class="container"> 
      <!-- .btn-navbar is used as the toggle for collapsed navbar content --> 
       <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
       </a> 
      <div class="nav-collapse collapse"> 
       <ul class="nav"><li><a href="#">nav</a> </li></ul> 
       <ul class="nav pull-right"> 
        <li> 
         <a href="/cart"><i class="icon-shopping-cart"></i> <span id="cart-count">1</span></a> 
        </li> 
       </ul> 
      </div>  
     </div> 
     </div> 
    </div><!-- /.navbar --> 
    </div> 

JSFIDDLE

Answer 1

एक बार नौसेना affix बनने के बाद यह सामान्य navbar CSS शैलियों का पालन नहीं करता है। आप बाहरी डीवी कंटेनर को एक आईडी दे सकते हैं, और फिर इसे 'affix' तत्व के रूप में सेट कर सकते हैं। यह सुनिश्चित करने के लिए सीएसएस का उपयोग करें कि यह 100% चौड़ाई रहता है।

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

Working Demo

Answer 2

यहाँ पूरा करता है कि आप क्या चाहते हैं संशोधित jsfiddle है साथ परेशानी हो रही हूँ है! गलत jsfiddle चिपकाया! जब मैं नकारात्मक वोट बोता हूं तो मुझे अहसास हुआ! मैं इसे फिर से और अद्यतन एक पल

अद्यतन में यह करेंगे: यहां है:

http://jsfiddle.net/KUPbD/4/

एक अतिरिक्त नोट के रूप में, आप data-spy="affix" और data-offset-top="", इसलिए साथ html में प्रत्यय घोषणा कर सकते हैं कोई एक अतिरिक्त इनलाइन स्क्रिप्ट

Answer 3

आप नेवबार के एक बाहरी कंटेनर से जुड़ी प्रत्यय करने की जरूरत है, मैं इसे के लिए कुछ परिवर्तन किया है ...

इस जे एस पर कोई परिवर्तन नहीं है, लेकिन एचटीएमएल संरचना: -

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

डेमो: - http://jsfiddle.net/KUPbD/1/

Answer 4

<script type="text/javascript"> 
    $(document).ready(function(e) { 

     $(window).scroll(function() { 
      if ($(window).scrollTop() > $('.navbar').offset().top) { 
       $('.navbar').addClass('navbar-fixed-top'); 
       $('.navbar').removeClass('navbar-static-top');     
      } else { 
       $('.navbar').removeClass('navbar-fixed-top'); 
       $('.navbar').addClass('navbar-static-top');  
      } 
     });   

    }); 
</script>