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（小提琴中名为nav-wrapper的类）中。上面的JQuery代码在页面初始化期间根据行高设置其高度。即使顶行消失（固定），高度也保持不变。

JS代码的另一部分：

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

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

Answer 2

当您使用MarcinSkórzewski的解决方案时，如果您在导航栏中使用折叠，则会影响下拉列表。

使用一小段JS代码设置完整导航栏的高度。
当您的窗口变小时，导航栏将替换为||| （使用默认引导程序）
当您使用下拉列表并按|||时要显示下拉列表，它将被放置在下面的内容后面。它不会向下滑动内容。这是因为设置了导航栏的高度。

可能的解决方案1：单击|||时删除导航栏的高度当下拉滑回时，再将其放回原处。可能的解决方案2：一旦导航栏粘贴

，为下一个元素添加margin-top

更新： https://stackoverflow.com/a/15177077/1059884 使用CSS的优秀解决方案

bootstrap-affix：div下面的词缀“跳”到顶部。如何让它顺利滚动？

2 个答案: