Question

我正在使用bootstrap词缀构建一个网站来管理主菜单。它似乎在相当短的页面上完美地工作但我发现随着页面长度的增加，菜单开始变得跳跃，抖动，滚动所以我创建了3个示例页面来说明问题。除了一些额外的内容以促进额外的滚动，词缀的实现是相同的。

通常，当我滚动时，我使用导航器滚动条 - 使用滚动条与键盘上/下箭头的行为更加明显，在Linux Firefox与Chrome上可能更为明显。

词缀CSS设置：

.affix {
  top: 0;
  width: 100%;
  z-index: 9999 !important;
}

.affix + .affix-content-container
{
  position: relative;
  top: 50px;
}

.navbar {
  margin-bottom: 0px;
}

我在div上使用class，affix-content-container来包含bootstrap nav之后的所有正文内容。以下是3个不同长度演示页面的链接：

affix short page

affix medium page

affix long page

我看过其他一些使用类似词缀，更长页面的网站，而且它们似乎表现得更流畅。有任何建议如何解决这个问题吗？

以下是Firefox视频的链接。对于每个页面，我首先使用鼠标和滚动条，然后只使用箭头键。绿色水平线是透视，有助于说明问题。

Affix Video Demo

解决方法解决方案更新：2018-01-23

我将CSS转换添加到.affix，in-out等，但它们没有效果。它仍然是跳跃的。所以我回想起了一个导航栏，它滚动到顶部并平滑地固定在页面顶部。我对javascript不太满意，但我发现了一些代码并对其进行了修改：

<script type="text/javascript">
  $(window).scroll(function() {
    var scroll = $(window).scrollTop();
    if (scroll >= 120) {
      $('nav').addClass('fix-navbar-position');
    } else {
     $('nav').removeClass('fix-navbar-position');
    }
  });
</script>

我将标题的高度设置为120，然后滚动固定高度：

header { height: 120px; }

我发现如果我把它设置为：我看到了一些奇怪的边距或额外的垂直填充，所以我将它分开以便nav只是一个外部容器 - 这就有用了：

<nav>
  <div class="navbar navbar-default navbar-inverse">

问题似乎与.navbar样式有关。要查看变通方法解决方案，请访问：javascript-scroll-fix

Bootstrap导航附加错误 - 菜单变得紧张，在长页面上跳跃

0 个答案: