Question

我使用Bootstrap的附加功能创建了一个JSFiddle，一旦向下滚动并且标题移出视图，导航就会停留在屏幕顶部。

我遇到的问题是，当使用纯HTML时，导航下方的文字会跳起并过早隐藏在导航器后面。

查看有问题的代码here。

这是我使用的代码：

<div class="container">
<div class="row">
    <div class="span12">
        <div class="well">
            <h1>Banner</h1>
        </div>
    </div>
</div>
</div>
<div class="nav-wrapper">
<div class="nav navbar affix" data-spy="affix" data-offset-top="120">
    <div class="navbar-inner">
        <div class="container">
            <div class="span12">
                <a class="brand" href="#">My Brand</a>
                <span class="navbar-text">
                    This is a navbar.
                </span>
            </div>    
        </div>
    </div>
</div>
</div>
<div class="container">
<div class="span3">
    <h2>some lorem ipsum for scrolling:</h2>
   Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
</div>
</div>

CSS如下：

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

我发现了一个非常类似的问题here，但在使用该示例中的代码时，出于某种原因它对我不起作用。

执行该技巧的额外CSS如下：

.affix + .container {
    padding-top:50px
}

我也知道this one here之类的JavaScript解决方案，它使用以下代码来创建所需的效果：

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

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

我只想弄清楚为什么我的特定HTML版本在使用CSS padding-top修复程序实现上一个修补程序时没有表现。

提前感谢您的协助。

Answer 1

这似乎有效：

.nav-wrapper
{
    min-height:50px;
}

更新了jsFiddle： http://jsfiddle.net/yYE62/5/

正在发生的事情是，附加插件会使.affix类的元素在文档中具有固定位置。这会从流中移除附加元素（或布局，如果您愿意）并导致容器崩溃。当发生这种情况时，下面的内容会向上滑动以填充附加元素过去占用的空间。

通过添加上述规则，您可以告诉该容器保持最小高度，无论其是否有内容。它不一定是50px;这是.navbar的默认高度，因此请根据您的需要进行调整。如果您不希望所有 .nav-wrapper具有最小高度，请指定id并使用它。

Answer 2

你需要一个额外的包装才能完美地工作。给它一个最小高度，与你正在贴上的那个完全一致：）

Bootstrap Affix Nav导致Div下方跳跃

2 个答案: