6

玩了几天 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↓&lt;/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>

任何帮助表示赞赏！

4

2 回答 2

15

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

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

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

它需要将您的标题放置在另一个（小提琴中div称为类）中。nav-wrapper上面的 jQuery 代码在页面初始化期间根据行高设置其高度。即使顶行消失（固定），高度也保持不变。

JS代码的另一部分：

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

​ 使您不受顶行上方空间大小的影响，但在您的情况下，我认为您不需要它（您可以预测它总是需要 60px）。

于 2012-11-24T23:38:45.550 回答
0

当您使用 Marcin Skórzewski 的解决方案时，请注意，如果您在导航栏中使用折叠，则会影响下拉菜单。

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

可能的解决方案1：点击|||时去掉导航栏的高度 并在下拉菜单滑回时再次将其放回。可能的解决方案2：一旦导航栏粘住，就为下一个元素添加一个margin-top

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

于 2013-08-27T15:40:39.583 回答