Question

我有一个标准的Bootstrap导航栏，在滚动50px之后，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}

切换到词缀时，Bootstrap导航栏会出现抖动

1 个答案: