bootstrap static to fixed navbar jumping on scroll

Question

在解決這個問題時遇到了一些麻煩。 我有一個從靜態到固定的引導程序導航欄，當瀏覽器滾動瀏覽頂部的標誌時。一切工作正常，除非當導航欄到達頂部時，它會跳過缺少的幾行內容。誰能幫我解決這個問題嗎？

HTML

<div id="logo"> 
    <div class="container"> 
     <div class="row"> 
      <div class="col-md-12"> 
       <h1>BIG,</h1> 
       <h1>BIG LOGO!</h1> 
      </div> 
     </div> 
    </div> 
</div>  

<div id="nav-wrapper"> 
    <div id ="nav" class="navbar navbar-inverse navbar-static-top"> 
     <div class="container"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
      <span class="sr-only">Toggle navigation</span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      </button> 
      <a class="navbar-brand" href="#">Project name</a> 
     </div> 
     <div id="navbar" class="collapse navbar-collapse"> 
      <ul class="nav navbar-nav"> 
      <li class="active"><a href="#">Home</a></li> 
      <li><a href="#about">About</a></li> 
      <li><a href="#contact">Contact</a></li> 
      </ul> 
     </div><!--/.nav-collapse --> 
     </div> 
    </nav> 
</div>  

CSS

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

的Java

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

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

Check the JSFIDDLE example

謝謝你們！

Answer 1

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

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

    $('#nav').on('affixed.bs.affix', function() { 
     $('#content').css({"margin-top": "100px"}) 
    }); 
}); 

https://jsfiddle.net/yyLbgh98/1/