使用 Bootstrap 在滚动时动画/缩小导航栏 [英] Animate/Shrink NavBar on scroll using Bootstrap

问题描述

我为此搜索了一大堆，但似乎找不到可行的解决方案.基本上，我的 NavBar 完全符合我的要求.我现在想在我的页面向下滚动时缩小 NavBar，使用漂亮的平滑过渡(动画)使其更纤薄.

这是我当前导航栏的 HTML 标记:

<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="切换导航"><span class="navbar-toggler-icon"></span><a class="navbar-brand" href="#"><img class="animatedounceIn" src="img/logo-light.png" alt="I Web You &#8211; Perth Website品牌化"></a><div class="collapse navbar-collapse" id="navbarSupportedContent"><ul class="navbar-nav ml-auto"><li class="nav-item active"><a class="nav-link" href="#">首页 <span class="sr-only">(当前)</span></a><li class="nav-item"><a class="nav-link" href="#">关于</a><li class="nav-item"><a class="nav-link" href="#">作品集</a><li class="nav-item"><a class="nav-link" href="#">联系方式</a><li class="nav-item"><a class="nav-link" href="#">博客</a>

</nav></标题>

有什么想法可以实现这一目标吗?我进行了大量搜索，但大多数解决方案都是针对 Bootstrap 3 的.

干杯

解决方案

Bootstrap 5(2021 年更新)

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

滚动后的 Bootstrap 5 棒导航栏(简单的置顶)

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

滚动后引导 5 棒导航栏(使用 IntersectionObserver 动画)

---

引导程序 4(2018 年更新)

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

但是，附注 已从 Bootstrap 4 中删除强>...

<块引用>

"删除了 Affix jQuery 插件.我们建议使用位置:粘性取而代之的是 polyfill.有关详细信息和具体信息，请参阅 HTML5 Please entrypolyfill 建议."

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

<小时>

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

.stuck .sticky-top {背景色:#222；填充顶部:3px；填充底部:3px；}

Sticky Top Navbar - IntersectionObserver 演示

<小时>

您也可以使用 jQuery 插件，例如 ScrollPos-Styler，或者编写您自己的 jQuery控制滚动时的导航栏样式...

工作原理:

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

<a href="#";class=navbar-brand">Brand</a><a class="navbar-toggler";数据切换=折叠"data-target=.navbar-collapse">☰</a><ul class="nav navbar-nav"><li class="nav-item"><a href="#";class="nav-link">..</a>

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

var toggleAffix = function(affixElement, scrollElement, wrapper) {var height = afixElement.outerHeight(),top = wrapper.offset().top;if (scrollElement.scrollTop() >= top){包装器高度(高度)；词缀元素.addClass(词缀");}别的 {词缀元素.removeClass(词缀");wrapper.height('auto');}};/* 在任何数据上使用toggleAffix-toggle="affix";元素 */$('[data-toggle="affix"]').each(function() {var ele = $(this),包装器 = $('<div></div>');ele.before(包装器)；$(window).on('scroll resize', function() {toggleAffix(ele, $(this), wrapper);});//在里面toggleAffix(ele, $(window), wrapper);});

用于操作词缀样式(填充/高度、颜色等)的 CSS:

html,body {高度:100%；填充顶部:56px;/*固定导航栏的高度*/}.导航栏{-webkit-transition:padding 0.2s 缓和；-moz-transition:padding 0.2s 缓和；-o-transition:padding 0.2s 缓和；过渡:padding 0.2s 缓和；}.附加{填充顶部:0.2em ！重要；填充底部:0.2em ！重要；-webkit-transition:padding 0.2s 线性；-moz-transition:padding 0.2s 线性；-o-transition:padding 0.2s 线性；过渡:填充 0.2s 线性；}部分 {最小高度:计算(100% - 70px)；}

<小时>

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

Sticky Top Navbar - jQuery 演示

<小时>

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

$(window).scroll(function() {/* 滚动 100px 后贴上 */如果 ($(document).scrollTop() > 100) {$('.navbar').addClass('词缀');} 别的 {$('.navbar').removeClass('词缀');}});

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

<小时>

更多 Bootstrap 4 更改滚动示例上的导航栏样式:
滚动后很粘 (4.0.0)
收缩高度 (4.0.0)
收缩高度 (alpha-6)
背景透明
滚动后改变颜色
使用滚动条更改导航栏背景颜色

相关问题:
在滚动时将导航栏固定到顶部
词缀在 Bootstrap 4 (alpha) 中不起作用

I've searched a whole heap for this but cant seem to find a working solution. Basically I've got my NavBar perfectly how I want it. I now want to shrink the NavBar when my page scrolls down to make it more slim using a nice smooth transition (animation).

This is my HTML markup for my current NavBar:

<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>

Any ideas how I can achieve this? I've done a lot of searching but most solutions were for Bootstrap 3.

Cheers

解决方案

Bootstrap 5 (update 2021)

Bootstrap 5 still has the sticky-top class that can be used to create a static-to-fixed Navbar effect when the page is scrolled.

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

Another option is to use a JavaScript IntersectionObserver. This method watches for a "trigger" element. Once the trigger element is visible in the viewport, a CSS class is added to the Navbar. This "stuck" CSS class can contain whatever CSS is needed to change the Navbar style and position.

Bootstrap 5 stick navbar after scrolling (animate with IntersectionObserver)

---

Bootstrap 4 (Updated 2018)

Most of the shrink on scroll Navbar implementations for Bootstrap 3.x are done using the Affix component to change the style of the navbar at a specific scroll position.

However, Affix has been dropped from 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."

To create a similar Navbar effect in Bootstrap 4, you can use position: sticky (not supported in all browsers) by adding the sticky-top class to the Navbar. This works to "stick" the Navbar when it reaches the top, but doesn't trigger an event to indicate when the it's "stuck". Therefore, JS is needed to change the Navbar style when it's "stuck".

---

One JS method supported in modern browsers is IntersectionObserver. Use it to "watch" when a hidden trigger element above the Navbar reaches the viewport (when stuck is applied to the html element).

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

Sticky Top Navbar - IntersectionObserver Demo

---

You could also jQuery plugin such as ScrollPos-Styler, or write your own jQuery to control the navbar styles on scroll...

How it works:

A fixed-top Navbar with 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 to watch scroll position and conditionally toggle the .affix class:

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 to manipulate the affix style (padding/height, color, etc..):

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);
}

---

Note: As of Bootstrap 4.0.0, the Navbar has changed slightly as navbar-toggleable-* has change to navbar-expand-

Sticky Top Navbar - jQuery Demo

---

Finally, you can use a simple jQuery $(window).scroll() function if you know the exact position of when the Navbar needs to stick...

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

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

---

More Bootstrap 4 change Navbar style on scroll examples:
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

Related questions:
Fixing navbar to top on scroll
Affix is not working in Bootstrap 4 (alpha)

这篇关于使用 Bootstrap 在滚动时动画/缩小导航栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！