Bootstrap粘性导航栏平滑滚动

我正在尝试修复我编写的代码。它可以工作，但当我向下滚动页面时并不平滑！Bootstrap粘性导航栏平滑滚动

<div class="container"> 
     <div data-spy="affix" data-offset-top="30"> 
      <div id="nav" class="navbar navbar-default" role="navigation"> 
       <div class="container"> 
        <div class="navbar-header"> 
         <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
          <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 class="navbar-collapse collapse"> 
         <ul class="nav navbar-nav"> 
          <li><a href="index.html">Home</a></li> 
          <li class="active"><a href="grid_test.html">Grid Test</a></li> 
          <li><a href="jumbotron.html">Jumbotron</a></li> 
         </ul> 
        </div><!--/.nav-collapse --> 
       </div><!--/.container --> 
      </div><!--/.navbar --> 
     </div><!--/.data-spy--> 

     <div class="page-header"> 
      <h1>Bootstrap grid test</h1> 
      <p class="lead">Lo-fi ethical quinoa nesciunt. Esse fugiat sapiente fixie squid. Blog Etsy deserunt Brooklyn, meggings banh mi in post-ironic narwhal ad nihil Pinterest butcher nostrud. Cillum laborum pork belly authentic. Truffaut enim pop-up farm-to-table semiotics tattooed. Literally nisi duis, gluten-free Helvetica cornhole irony lo-fi. Et seitan literally paleo small batch cillum.</p> 
     </div> 

    </div>

我没有使用任何类型的脚本除了由引导

使用

来源

2013-10-25 iDiot

可以复制的问题在[小提琴]（http://jsfiddle.net）？ –

是的，当然。这里是：http://jsfiddle.net/HLGXL/ – iDiot

好吧，似乎是什么问题？当你向下滚动时，在这里似乎很好 –

那么从您的意见，问题是，通过分配.affix到.nav，该元素被分配一个position:fixed;，这将其从流中移除。您需要通过在以下元素上添加额外的余量来解决该问题。

.affix + div { 
    margin-top:60px; 
} 
.affix + .page-header { 
    margin-top:100px; 
}

您可能需要调整它以使其“完美”。

Fiddle

来源

2013-10-25 18:47:57

谢谢！正如你所说的那样工作，但需要一些小小的调整。非常感谢你的帮助！ – iDiot

Bootstrap粘性导航栏平滑滚动

回答

相关问题