粘性菜單快速跳轉到頂部，而標頭沒有完全隱藏或滾動到頂部

Question

我想創建一個粘性導航使用jQuery。我的導航快速跳轉到頂部，而標題尚未完全隱藏或滾動到頂部。我希望標題在滾動到位之前完全滾動到頂部。

問題：滾動後標題流完全隱藏到頂部之後，如何才能將導航條置於其位置？

這是我的jsfiddle鏈接http://jsfiddle.net/rodgefhi/577br99o/的插圖。

這是我的代碼

<style type="text/css"> 
    .clearer { 
     clear: both; 
     margin: 0; 
     padding: 0; 
    } 
    .header { 
     width: 84%; 
      margin: 0 auto; 
    } 
    .dummy-content { 
     width: 10%; 
     margin: auto; 
    } 
    .fixed { 
     position: fixed; 
     top: 0; 
    } 
    .nav-placeholder { 
     width: 84%; 
     margin: 0 auto; 
     background: transparent; 
     height: auto; 
    } 
    nav { 
     width: 84%; 
     background: red; 
     } 
     nav ul li { 
      list-style: none; 
      float: left; 
      padding: 10px; 
      text-align: center; 
      } 
      nav ul li:hover { 
       cursor: pointer; 
       background: white; 
      } 
</style> 
<script type="text/javascript" src="jquery-1.10.2.js"></script> 
<script type="text/javascript"> 
    $(document).ready(function() { 
     var navOffset = $("nav").offset().left; 

     $("nav").wrap('<div class="nav-placeholder"></div>'); 
     $(".nav-placeholder").height($('nav').outerHeight()); 

     $(window).scroll(function() { 
      var scrollPos = $(window).scrollTop(); 
      $(".value").html(scrollPos); 
      if (scrollPos >= navOffset) { 
       $("nav").addClass("fixed"); 
      } else { 
       $("nav").removeClass("fixed"); 
      } 
     }); 
    }); 
</script> 
<div class="header"> 
    <p>this is header</p> 
    <p>this is header</p> 
    <p>this is header</p> 
    <p>this is header</p> 
    <p>this is header</p> 
</div> 
<nav> 
    <ul> 
     <li>One</li> 
     <li>Two</li> 
     <li>Three</li> 
     <li>Four</li> 
    </ul> 
    <div class="clearer"></div> 
</nav> 
<div class="value"></div> 
<div class="dummy-content"> 
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,</p> 
</div> 

謝謝！

Answer 1

你得到使用此左側偏移：

var navOffset = $("nav").offset().left; 

我想你想的頂部值：

var navOffset = $("nav").offset().top; 

更新小提琴：http://jsfiddle.net/577br99o/8/

Answer 2

，如果你願意，你可以隱藏標題，然後在回調函數中添加固定類或刪除它像這樣的東西

$(document).ready(function() { 
     var navOffset = $("nav").offset().left; 

     $("nav").wrap('<div class="nav-placeholder"></div>'); 
     $(".nav-placeholder").height($('nav').outerHeight()); 

     $(window).scroll(function() { 
      var scrollPos = $(window).scrollTop(); 
      $(".value").html(scrollPos); 
      if (scrollPos >= navOffset) { 

       $('.header').slideUp(500,function(){ 
        $("nav").addClass("fixed"); 
       }); 

      } else { 
       $('.header').slideDown(500,function(){ 
        $("nav").removeClass("fixed"); 
       }); 
      } 
     }); 
    }); 

我希望它能幫助