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

Question

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

这是我当前 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 的。

干杯

Answer 1

Bootstrap 5(2021 年更新)

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

Bootstrap 5 stick navbar after scrolling (simply sticky-top)

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

Bootstrap 5 stick navbar after scrolling (animate with IntersectionObserver)

---

Bootstrap 4(2018 年更新)

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

但是，附加 has been dropped来自 Bootstrap 4..

"Dropped the Affix jQuery plugin. We recommend using a position: sticky polyfill instead. See the HTML5 Please entry for details and specific polyfill recommendations."

要在 Bootstrap 4 中创建类似的 Navbar 效果，您可以使用 position: sticky (并非所有浏览器都支持)通过添加 sticky-top 类到导航栏。这可以在 Navbar 到达顶部时“粘住”，但不会触发一个事件来指示它何时“粘住”。因此，当“卡住”时，需要JS来改变Navbar的样式。

---

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

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

Sticky Top Navbar - IntersectionObserver Demo

---

您还可以使用 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-

Sticky Top Navbar - jQuery Demo

---

最后，如果您知道导航栏何时需要固定的确切位置，您可以使用一个简单的 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 在滚动示例上更改 Navbar 样式:
simply sticky after scroll (4.0.0)
shrink height (4.0.0)
shrink height (alpha-6)
transparent over background
change color after scroll
change navbar bg color with scrollspy sections

相关问题:
Fixing navbar to top on scroll
Affix is not working in Bootstrap 4 (alpha)