使用 Bootstrap 在滚动时动画/缩小 NavBar

Question

新手上路，请多包涵

我为此搜索了整个堆，但似乎找不到可行的解决方案。基本上我的 NavBar 完全符合我的要求。我现在想在我的页面向下滚动时缩小 NavBar，以使用漂亮的平滑过渡（动画）使其更苗条。

这是我当前 NavBar 的 HTML 标记：

 <header>

      <nav class="navbar fixed-top navbar-toggleable-md navbar-inverse bg-inverse">
          <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
              <span class="navbar-toggler-icon"></span>
          </button>
          <a class="navbar-brand" href="#"><img class="animated bounceIn" src="img/logo-light.png" alt="I Web You &#8211; Perth Website Branding"></a>

          <div class="collapse navbar-collapse" id="navbarSupportedContent">
              <ul class="navbar-nav ml-auto">
                  <li class="nav-item active">
                      <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                  </li>
                  <li class="nav-item">
                      <a class="nav-link" href="#">About</a>
                  </li>
                  <li class="nav-item">
                      <a class="nav-link" href="#">Portfolio</a>
                  </li>
                  <li class="nav-item">
                      <a class="nav-link" href="#">Contact</a>
                  </li>
                  <li class="nav-item">
                      <a class="nav-link" href="#">Blog</a>
                  </li>
              </ul>
          </div>
      </nav>

    </header>

有什么想法可以实现吗？我做了很多搜索，但大多数解决方案都是针对 Bootstrap 3 的。

干杯

原文由 user3599852 发布，翻译遵循 CC BY-SA 4.0 许可协议

html css bootstrap bootstrap-4 navbar

阅读 675

1 个回答

得票最新

社区维基

1

发布于
2022-12-19

Bootstrap 5（2021 年更新）

Bootstrap 5 仍然有 sticky-top 类，可用于在页面滚动时创建静态到固定的 Navbar 效果。

滚动后 Bootstrap 5 条状导航栏（简单的粘性顶部）

另一种选择是使用 JavaScript IntersectionObserver。此方法监视“触发”元素。一旦触发器元素在视口中可见，一个 CSS 类就会添加到导航栏。这个“卡住”的 CSS 类可以包含更改导航栏样式和位置所需的任何 CSS。

滚动后引导 5 条导航栏（使用 IntersectionObserver 制作动画）

Bootstrap 4（2018 年更新）

Bootstrap 3.x 的大多数滚动导航栏实现收缩都是使用 Affix 组件完成的，以更改特定滚动位置的导航栏样式。

但是，Affix 已从 Bootstrap 4 中删除。

“删除了 Affix jQuery 插件。我们建议改用 position: sticky polyfill。有关详细信息和具体的 polyfill 建议，请参阅 HTML5 Please 条目。”

要在 Bootstrap 4 中创建类似的导航栏效果，您可以使用 position: sticky （并非所有浏览器都支持），方法是将 sticky-top 类添加到导航栏。这可以在 Navbar 到达顶部时“ _粘住_”它， 但不会触发事件来指示它何时“ _粘住_”。因此，在“ _卡死_”的情况下，需要JS来改变Navbar的样式。

现代浏览器支持的一种 JS 方法是 IntersectionObserver 。当导航栏上方的隐藏触发元素到达视口时（当 stuck 应用于 html 元素时）使用它来“观察”。

 .stuck .sticky-top {
    background-color: #222;
    padding-top: 3px;
    padding-bottom: 3px;
}

粘性顶部导航栏 - IntersectionObserver 演示

您还可以使用 jQuery 插件，例如 ScrollPos-Styler ，或者编写您自己的 jQuery 来控制滚动条上的导航栏样式…

怎么运行的：

带有 data-toggle="affix" 的固定顶部导航栏：

 <div class="navbar navbar-dark bg-dark fixed-top navbar-expand-sm py-3" data-toggle="affix">
      <a href="#" class="navbar-brand">Brand</a>
      <a class="navbar-toggler" data-toggle="collapse" data-target=".navbar-collapse">☰</a>
      <ul class="nav navbar-nav">
          <li class="nav-item"><a href="#" class="nav-link">..</a>
          </li>
      </ul>
</div>

jQuery 观察滚动位置并有条件地切换 .affix 类：

 var toggleAffix = function(affixElement, scrollElement, wrapper) {
    var height = affixElement.outerHeight(),
        top = wrapper.offset().top;

    if (scrollElement.scrollTop() >= top){
        wrapper.height(height);
        affixElement.addClass("affix");
    }
    else {
        affixElement.removeClass("affix");
        wrapper.height('auto');
    }
};

/* use toggleAffix on any data-toggle="affix" elements */
$('[data-toggle="affix"]').each(function() {
    var ele = $(this),
        wrapper = $('<div></div>');

    ele.before(wrapper);
    $(window).on('scroll resize', function() {
        toggleAffix(ele, $(this), wrapper);
    });

    // init
    toggleAffix(ele, $(window), wrapper);
});

CSS 来操纵词缀样式（填充/高度、颜色等）：

 html,body {
    height:100%;
    padding-top:56px; /*height of fixed navbar*/
}

.navbar {
  -webkit-transition:padding 0.2s ease;
  -moz-transition:padding 0.2s ease;
  -o-transition:padding 0.2s ease;
  transition:padding 0.2s ease;
}

.affix {
  padding-top: 0.2em !important;
  padding-bottom: 0.2em !important;
  -webkit-transition:padding 0.2s linear;
  -moz-transition:padding 0.2s linear;
  -o-transition:padding 0.2s linear;
  transition:padding 0.2s linear;
}

section {
    min-height:calc(100% - 70px);
}

注意：从 Bootstrap 4.0.0 开始，导航栏略有变化 navbar-toggleable-* 已更改为 navbar-expand-

粘性顶部导航栏 - jQuery 演示

最后，如果您知道导航栏需要停留的确切位置，则可以使用简单的 jQuery $(window).scroll() 函数…

 $(window).scroll(function() {
  /* affix after scrolling 100px */
  if ($(document).scrollTop() > 100) {
    $('.navbar').addClass('affix');
  } else {
    $('.navbar').removeClass('affix');
  }
});

https://codeply.com/go/62Roy6RDOa

更多 Bootstrap 4 在滚动示例上更改导航栏样式：

滚动后简单粘滞（4.0.0）

收缩高度(4.0.0)

收缩高度（alpha-6）

背景透明

滚动后改变颜色

使用 scrollspy 部分更改导航栏 bg 颜色