twitter-bootstrap bootstrap-affix ：下面的 Div 词缀“跳转”到顶部。如何让它平滑地向后滚动？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13540969/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
bootstrap-affix : Div underneath affix "jumps" to top. How do I make it smoothly scroll behind?
提问by Axxoul
Been playing with boostrap for a few days and amazed at the capabilities it has to offer.
使用 boostrap 玩了几天，对它提供的功能感到惊讶。
Have been trying to have a "header" of some sorts, which is affixed to the top when the user scrolls down.
一直试图有某种“标题”，当用户向下滚动时，它会贴在顶部。
You can find my current work here: http://mp3dj.free.fr/affix/site/
你可以在这里找到我目前的工作：http: //mp3dj.free.fr/affix/site/
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/
但是您会注意到，向下滚动时，“POST 1”突然跳转到页面顶部。即没有像这里这样的平滑滚动：http: //jsfiddle.net/namuol/Uaa3U/
Current code:
当前代码：
<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>
Any help appreciated!
任何帮助表示赞赏！
回答by Marcin Skórzewski
What happens in your code is the row at the top changes its position to fixedwhen its offset to the top is smaller then 60px. The consequence is that it stops to consume any space above the next row.
在您的代码中发生的事情是顶部的行将其位置更改为fixed当其与顶部的偏移小于 60px 时。结果是它停止消耗下一行上方的任何空间。
In the jsfiddle you introduced there is a JS code you should understand and should help you. This one is for you:
在您介绍的 jsfiddle 中有一段 JS 代码，您应该理解并应该对您有所帮助。这个是给你的：
$('#nav-wrapper').height($("#nav").height());
It requires your header to be placed yet inside another div(class called nav-wrapperin 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).
它需要将您的标头放置在另一个div（nav-wrapper在小提琴中调用的类）中。上面的 JQuery 代码在页面初始化期间根据行高设置其高度。即使顶行消失（固定），高度也保持不变。
Another part of the JS code:
JS代码的另一部分：
$('#nav').affix({
offset: $('#nav').position()
});
? 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).
? 使您独立于顶行上方的空间大小，但在您的情况下，我认为您不需要它（您可以预测它总是需要 60px）。
回答by hans2103
when you use the solution from Marcin Skórzewski mind that if you're using a collapse in your navbar it effects the dropdown.
当您使用 Marcin Skórzewski 的解决方案时，请注意，如果您在导航栏中使用折叠，它会影响下拉列表。
- The height of the complete navbar is set using the small piece of JS code.
- When your window gets smaller the navbar will be replaced with ||| (using default bootstrap)
- When you're using a dropdown and press ||| to show the dropdown it will be placed behind the content below. It will not slide the content down. This is because the height of the navbar is set.
- 使用一小段JS代码设置完整导航栏的高度。
- 当您的窗口变小时，导航栏将被替换为 ||| （使用默认引导程序）
- 当您使用下拉菜单并按 ||| 时 要显示下拉菜单，它将被放置在下面的内容后面。它不会向下滑动内容。这是因为设置了导航栏的高度。
Possible solution 1: remove the height of the navbar when you click on ||| and place it back again when the dropdown slides back. Possible solution 2: add a margin-top to the next element once the navbar sticks
可能的解决方案 1：当您单击 ||| 时删除导航栏的高度 并在下拉菜单滑回时再次将其放回原处。可能的解决方案 2：一旦导航栏粘住，就向下一个元素添加边距顶部
update: https://stackoverflow.com/a/15177077/1059884an excellent solution using CSS
更新：https: //stackoverflow.com/a/15177077/1059884一个使用 CSS 的优秀解决方案
