javascript - Bootstrap 导航栏（附加导航栏）在滚动期间调整大小

Question

我在早期开发中有一个以引导程序为主题的网站，并且正在经历来自粘性导航栏的奇怪行为。在 Chrome 中向下滚动一半后（以及最初在 Firefox 中滚动时），导航栏缩小到其宽度的一半。谁能想到造成这种情况的原因？

谢谢！

score 1 · Accepted Answer

看起来您同时使用了词缀和滚动间谍。我认为您不需要同时使用两者，这可能是导致问题的原因。你最好只使用scrollspy。

为此，请将您的 body 标签更改为：

<body data-spy="scroll" data-target=".navbar" data-offset-top="50">

然后将您的导航栏 div 更改为：

<div class="navbar navbar-inverse navbar-fixed-top">

这将在让 scrollspy 工作的同时停止调整大小的问题。但是，如果您希望导航栏小于全宽，最好不要使用navbar-fixed-top导航栏，而是自己将导航栏固定到顶部，执行以下操作：

@media (min-width: 481px) {
  .navbar {
    position: fixed;
    z-index: 1030;
    width: 80%;
    margin: 20px auto;
  }

}

score 0 · Accepted Answer

在你的 CSS 中尝试这个以导航包装器 id 为基础

html

<nav id="nav-wrapper" class="navbar-default" role="navigation" data-spy="affix" data-offset-top="60">

css

#nav-wrapper.affix {
top: 0 !important;
width: 100% !important;
}

它应该可以解决您的调整大小问题，问候！

2 回答 2