jQuery Plugin To Shrink Bootstrap Nav On Scroll - NavShrink

NavShrink is a lightweight jQuery & Bootstrap plugin which smartly shrinks and expands the header navigation as well as changing the background color on page scroll.

How to use it:

1. Assume that you have a fixed Bootstrap navbar as this:

<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <a class="navbar-brand" href="#"><img src="logo.png" alt="logo"></a>
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">All In One</a>
    </div>
    <div id="navbar" class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#contact">Contact</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li class="dropdown-header">Nav header</li>
            <li><a href="#">Separated link</a></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="../navbar/">Default</a></li>
        <li><a href="../navbar-static-top/">Static top</a></li>
        <li class="active"><a href="./">Fixed top <span class="sr-only">(current)</span></a></li>
      </ul>
    </div><!--/.nav-collapse -->
  </div>
</nav>

2. Download and include the JavaScript file navShrink.min.js after jQuery library.

<script src="//code.jquery.com/jquer.min.js"></script>
<script src="bootstrap.min.js"></script>
<script src="navShrink.js"></script>

3. Activate the plugin and done.

$('.navbar').navShrink();

4. Config the NavShrink plugin with the following options.

$('.navbar').navShrink({

  // top and bottom padding after/before scroll
  anchorFinalPadding: 30,
  anchorInitPadding: 40,
  logoInitPadding: 20,
  logoFinalPadding: 12,
  logoMobilePadding: 10,
  logoMobileFinalHeight: 30,

  // logo height after/before scroll
  logoInitHeight: 72,
  logoFinalHeight: 56,
  logoMobileInitHeight: 50,

  // breakpoint for mobile nav
  mobileBreakpoint: 765,

  // initial background color
  bgInitColor: 'rgba(21,21,21,1)',

  // anchor element
  anchorElem: '.navbar-nav>li>a',

  // nav container
  navContainer: this,

  // logo element
  logoElem: 'a.navbar-brand img',

  // parent container
  logoParent: 'a.navbar-brand',

  // default offset in pixels
  defaultOffset: 80,

  // animation speed
  speed: 2,

  // enable the fade transition effect
  fadeEnable: true,

  // enable the responsive mode
  responsiveEnable: true
  
});

---

This awesome jQuery plugin is developed by gemlarin. For more Advanced Usages, please check the demo page or visit the official website.