需要幫助 - 粘滯navbar

Question

所以我有這個問題，我有我的導航欄，響應屏幕尺寸。

一切看起來不錯，但我需要它是粘性的。每當我這樣做的時候，它都會浮在我的第一張英雄圖片上，並且在頂部有一段約40-50px的部分，我無法擺脫。

如果有人可以請給我一個這個手。它一直在我的頭上進行了2周。

這裏是的jsfiddle：http://jsfiddle.net/fxar8/

<header> 
    <nav class="clearfix"> 
     <ul class="clearfix"> 
      <li><a href="index.html">Home</a></li> 
      <li><a href="#tl">Teaching and Learning</a></li> 
      <li><a href="#ne">News and Events</a></li> 
      <li><a href="#contact">Contact</a></li> 
      <li><a href="index.html">Home</a></li> 
      <li><a href="index.html">Home</a></li> 
     </ul> 
     <a href="#" id="pull">Menu</a> 
    </nav> 
</header> 

    <div class="hero-image first"> 
     <h1 class="big">Sample Text</h1> 
    </div> 

<section id="content"> 
    <div class="container"> 
     <section id="grid" class="clearfix"> 
      <div class="grid-6"> 
       <h1>About Us</h1> 
       <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's 
       standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a 
       type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining 
       essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum 
       passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. <a href="about-us.html">Read More</a></p> 
      </div> 
     </section> 
    </div> 
</section> 


     <a name="tl"><div class="hero-image second"></a> 
      <h1 class="big">Sample Text</h1> 
     </div> 

<section id="content"> 
    <div class="container"> 
     <section id="grid" class="clearfix"> 
      <div class="grid-4"> 
       <h1>Teaching & Learning</h1> 
       <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's 
       standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a 
       type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining 
       essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum 
       passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> 
      </div> 
      <div class="grid-2"> 
       <img src="images/tl.jpg" /> 
      </div> 
     </section> 
    </div> 
</section> 

     <a name="ne"><div class="hero-image third"></a> 
      <h1 class="big">Sample Text</h1> 
     </div> 

<section id="content"> 
    <div class="container"> 
     <section id="grid" class="clearfix"> 
      <div class="grid-2"> 
       <img src="images/ne.jpg" /> 
      </div> 
      <div class="grid-4"> 
       <h1>News and Events</h1> 
       <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's 
       standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a 
       type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining 
       essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum 
       passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> 
      </div> 
     </section> 
    </div> 
</section> 


     <a name="contact"><div class="hero-image fourth"></a> 
      <h1 class="big">Sample Text</h1> 
     </div> 

<section id="content"> 
    <div class="container"> 
     <section id="grid" class="clearfix"> 
      <div class="grid-2"> 
       <center><img src="images/2501.jpg" class="rounded" /></center> 
       <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's 
       standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a 
       type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining 
       essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum 
       passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> 

      </div> 
      <div class="grid-2"> 
       <center><img src="images/2502.jpg" class="rounded" /></center> 
       <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's 
       standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a 
       type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining 
       essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum 
       passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> 

      </div> 
      <div class="grid-2"> 
       <center><img src="images/2503.jpg" class="rounded" /></center> 
       <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's 
       standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a 
       type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining 
       essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum 
       passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> 

      </div> 
     </section> 
    </div> 
</section> 

     <footer class="grid-full"> 
      <p>&copy; BHS 2014.</p> 
      <p class="right"> Designed by <a href="http://begintoend.com" class="flink">Begintoend</a></p> 
     </footer> 

乾杯先進

Answer 1

所以基本上你需要修改一些東西，因爲 '教學的學習' 犯規適合。

// This is to fit longer text (Teaching and Learning) 
// + padding so it looks nicer 
nav a { 
    min-width: 150px; 
    padding: 0 15px; 
} 

// Total width needs to be adjusted 
// because we increased the size of navbar (Teaching..) 
nav ul { 
    width: 1000px; 
} 

// The gap was caused by h1 element's top margin inside hero 
.big { 
    margin-top: 0; 
} 

也不要忘記調整視口 - 寬度在其中transofrm菜單，由於菜單寬度增加