Bootstrap Affix Nav导致Div下方跳跃

Question

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

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

在这里查看有问题的代码.

这是我使用的代码:

<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%
}

我在这里发现了一个非常类似的问题,但在使用该示例中的代码时,由于某种原因它对我不起作用.

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

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

我也知道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 s都具有最小高度,请指定id并使用它.