javascript - 滚动 div 后如何将 Bootstrap 导航栏固定到顶部？

Question

我试图让带有 Bootstrap 的导航栏出现在某个名为“A”的 div 之后。 div "a"位于页面顶部，高度约为 400px。一旦用户滚动过 div“a”和滚动条，我希望滚动条保持在顶部。类似于这样的东西:https://www.facebook.com/home但我在顶部没有视频，它是一张图片。

我们可以 self Bootstrap 吗？

谢谢!

Answer 1

如果您想使用 Twitter 的 Bootstrap 实现此目的，请查看“Affix”js。您使用“data-offset-top”定义“固定”点，然后当用户向下滚动时，导航栏将固定在顶部。

CSS:

#con .well {
    height:390px;
}

#nav.affix {
    position: fixed;
    top: 0;
    width: 100%
}

HTML:

<div class="container" data-spy="affix" data-offset-top="400" id="nav">
    <div id="nav" class="navbar">
        <div class="navbar-inner"> ...

Javascript:

$('#nav').affix();

这是工作 fiddle : http://jsfiddle.net/skelly/df8tb/

这是一个工作示例(针对 Bootstrap 3 进行了更新):http://bootply.com/90936