बूटस्ट्रैप, नीचे स्क्रॉल करने के बाद एक navbar चिपचिपा बनाओ?

Question

मेरे पास एक नेविबार है जो हेडर छवि के नीचे है। मैं स्क्रॉल करते समय वेबपेज के शीर्ष पर चिपकने के लिए चाहता हूं। मैं जरूरी jQuery या सीएसएस के बारे में सोच नहीं सकता, क्योंकि नौसेना कुछ हद तक छोड़कर हेडर छवि के ठीक नीचे चिपक जाती है।

<div class="headerwrap pull-center"> 
<div class="container"> 
    <div id="header" class="row-fluid"> 
     <div class="span5" id="phones"> 
      <img class="phone" src="img/white.png" alt=""> 
     </div> 
     <div class="span7" id="mm-logo"> 
      <img class="mm-log" src="img/logo.png" alt=""> 
     </div> 
    </div> 
</div> 
</div> 


<div class="navbar navbar-inner" id="border-stuff"> 
    <div class="span12"> 

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

<!-- Everything you want hidden at 768px or less, place within here --> 
<div class="nav-collapse collapse" id="center-nav"> 
<ul class="nav" > 
    <li><a href="#h1"><h3>Heading1</h3></a></li><li class="divider-vertical"></li> 
    <li><a href="#h2"><h3>Heading2</h3></a></li><li  class="divider-vertical"></li> 
    <li><a href="#h3"><h3>Heading3</h3></a></li><li class="divider-vertical"> </li> 
    <li><a href="#h4"><h3>Heading4</h3></a></li><li class="divider-vertical"></li> 
    <li><a href="#h5"><h3>Heading4</h3></a></li> 
</ul> 
</div> 

</div> 
</div> 

Answer 1

आप अपने नेवबार स्क्रीन के शीर्ष पर तय रहने के लिए चाहते हैं, तो केवल एक बार शीर्षक छवि दूर स्क्रॉल किया गया है आप the bootstrap affix plugin उपयोग कर सकते हैं। जो कुछ भी करने के लिए सबसे अच्छा फिट बैठता है शीर्ष समायोजित

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

और:

Answer 2

तुम बस यह करने के लिए अपने Jquery कोड को बदलने के लिए की जरूरत है।