css - bootstrap-affix : Div underneath affix "jumps" to top. 如何让它平滑地向后滚动？

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

在您的代码中发生的事情是，当顶部的行到顶部的偏移量小于 60px 时，顶部的行将其位置更改为 fixed。结果是它停止消耗下一行上方的任何空间。

在你介绍的jsfiddle中有一段JS代码你应该理解并且应该对你有帮助。这是给你的:

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

它要求您的标题放在另一个 div 中( fiddle 中称为 nav-wrapper 的类)。上面的 JQuery 代码在页面初始化期间根据行高设置其高度。即使顶行消失(固定)，高度也保持不变。

另一部分JS代码:

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

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