Animate/Shrink NavBar on scroll using Bootstrap

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)