bootstrap-affix：下面的div“跳跃”到达顶点。如何让它平滑滚动后面？ [英] bootstrap-affix : Div underneath affix "jumps" to top. How do I make it smoothly scroll behind?

问题描述

使用boostrap玩了几天，惊讶于它提供的功能。

Been playing with boostrap for a few days and amazed at the capabilities it has to offer.

一直试图拥有某种类型的标题，

Have been trying to have a "header" of some sorts, which is affixed to the top when the user scrolls down.

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

You can find my current work here: http://mp3dj.free.fr/affix/site/

但是，您会注意到，向下滚动，POST 1突然跳到页面的顶部。即没有像这样的平滑滚动： http://jsfiddle.net/namuol/Uaa3U/

However you will notice that, when scrolling down, the "POST 1" suddenlty jumps to the top of the page. i.e there is no smooth scroll behind like here: 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>

任何帮助谢谢！

推荐答案

在顶部的偏移小于60px时，顶部的行会将其位置更改为 fixed 。结果是它停止占用下一行之上的任何空间。

What happens in your code is the row at the top changes its position to fixed when its offset to the top is smaller then 60px. The consequence is that it stops to consume any space above the next row.

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

In the jsfiddle you introduced there is a JS code you should understand and should help you. This one is for you:

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

它需要你的标题放在另一个 div （类名 nav-wrapper in fiddle）。上面的JQuery代码在页面初始化期间根据行高设置其高度。

It requires your header to be placed yet inside another div (class called nav-wrapper in fiddle). JQuery code above sets its height based on row height during initialization of the page. The height stays the same even if the top row disappears (of getting fixed).

JS代码的另一部分：

Another part of the JS code:

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

使您独立于顶行上方的空格大小，但在case我认为你不需要它（你可以预测它总是需要60px）。

​ makes you independent of the size of space above the top row, but in your case I think you do not need it (you can predict it always takes 60px).

这篇关于bootstrap-affix：下面的div“跳跃”到达顶点。如何让它平滑滚动后面？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！