bootstrap-affix:div下面的词缀"跳"到顶部.如何让它顺利滚动？

Question

一直在玩boostrap几天,并惊讶于它提供的功能.

一直试图有一些"标题",当用户向下滚动时,它会贴在顶部.

你可以在这里找到我目前的工作:http://mp3dj.free.fr/affix/site/

但是你会注意到,当向下滚动时,"POST 1"会突然跳到页面顶部.即这里没有光滑的滚动:http://jsfiddle.net/namuol/Uaa3U/

当前代码:

<div class="container">
  <div class="row affix-top" data-spy="affix" data-offset-top="60">
    <div class="span12">
      <div class="row">
        <div class="span3">
          <img src="http://www.socialfork.net/public/images/default-profile-photo-female.jpg" class="img-polaroid">
        </div>
      <div class="span9"><h1>Samantha Sam</h1></div>
    </div>
  </div>
</div>
  <div class="row">
    <div class="span12">
      <div id="post1" class="box">
        <h1>Post 1</h1>
        <p> Scroll Down?</p>
      </div>
      <div id="post2" class="box"><h1>Post 2</h1></div>
      <div id="post3" class="box"><h1>Post 3</h1></div>
     </div>
   </div>   
</div>

任何帮助赞赏!

Answer 1

你的代码中发生的事情是顶部的行改变了它的位置,fixed当它到顶部的偏移量小于60px时.结果是它停止消耗下一行上方的任何空间.

在jsfiddle中你介绍了一个你应该理解并应该帮助你的JS代码.这个是给你的:

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

它要求你的标题放在另一个div(nav-wrapper在小提琴中调用的类)中.上面的JQuery代码在页面初始化期间根据行高设置其高度.即使顶行消失(固定),高度也保持不变.

JS代码的另一部分:

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

让你独立于顶行上方的空间大小,但在你的情况下,我认为你不需要它(你可以预测它总是需要60px).