jquery - 切换到词缀时 Bootstrap 导航栏会抖动

Question

我有一个标准的 Bootstrap 导航栏，滚动 50 像素后，jQuery 添加词缀，如下所示:

<script type="text/javascript">
    $('#mainNav').affix({offset:{top:0}})
</script>

由于这会将导航栏从 position:relative 切换到 position:fixed，因此当导航栏下方的内容跳到屏幕顶部以填充时会导致抖动空间。

我一直在尝试，但无法阻止这种跳跃的发生，或者至少无法使其顺利进行。我试图从一开始就固定导航栏，并为导航栏的高度添加 margin-top，但不幸的是，这无法正常工作。

CSS

.navbar-default {
    background:#fff!important;
    border:0;
    border-top:4px solid #01203F;
    height:110px;
    border-radius:0;
    margin:0;
}
@media(min-width:768px) {
    .navbar-default {
        -webkit-transition: all 1s;
        -moz-transition: all 1s;
        transition: all 1s;
        border-bottom: none;
        z-index:10001!important
    }

    .navbar-default.affix {
        width:100%;
        background: #0E2A45!important;
        border-bottom: none;
    }
}

Answer 1

通过将导航栏放在包装器中解决了这个问题。

导航栏高度为 110px，因此添加:

<div class="nav-wrapper">
<div class="navbar affix">...</div>
</div>

CSS

.nav-wrapper {min-height:110px}