Bootstrap粘贴Nav使下面的Div跳起来

Bootstrap Affix Nav Causes Div Below To Jump Up

本文关键字：Div 跳起来 粘贴 Nav Bootstrap      更新时间：2023-09-26

我使用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填充顶部修复程序实现之前的修复程序时没有表现出来。

提前感谢您的帮助。

这似乎有效：

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

更新的jsFiddle:http://jsfiddle.net/yYE62/5/

实际情况是，词缀插件使具有.affix类的元素在文档中有一个固定的位置。这将从流（或布局，如果您愿意的话）中移除附加的元素，并导致容器塌陷。当这种情况发生时，下面的内容会向上滑动，以填充附加元素曾经占据的空间。

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

您需要一个额外的包装器才能完美地工作。给它一个与你粘贴的高度完全相同的最小高度`in:）

相关文章：