Edit in JSFiddle

/**
 * Add class to element based on scroll behavior
 
 by https://github.com/loganstellway/scrollClass
 */
(function (factory) {
  if (typeof define === 'function' && define.amd) {
    // AMD. Register as an anonymous module depending on jQuery.
    require(['jquery'], factory);
  } else {
    // No AMD. Register plugin with global jQuery object.
    factory(jQuery);
  }
}(function ($) {
  $.fn.scrollClass = function( options ){
    // Default options
    var d = {
      'last': 0,
      'offset': 100,
      'target': $(this),
      'class': 'scrolled',
      'downClass': 'progressing',
      'upClass': 'regressing'
    };



    // Merge Options
    options = $.extend( d, options );



    // Called when the user scrolls
    options.scroll = function(){
      options.current = $(window).scrollTop();

      // Offset from top class
      if (typeof options.offset === 'function') {
        options.tmp = options.offset();
      } else {
        options.tmp = options.offset;
      }

      if( options.current >= options.tmp ){
        options.target.addClass( options.class );
      } else {
        options.target.removeClass( options.class );
      }

      // Moving up / down class
      if( options.current >= options.last ){
        options.target.removeClass( options.upClass ).addClass( options.downClass );
      } else {
        options.target.removeClass( options.downClass ).addClass( options.upClass );
      }

      options.last = options.current;
    };



    // Initiate
    options.init = function(){
      // Listen to scroll
      $(window).on('scroll', function(){
        options.scroll();
      });

      // Call on page load
      options.scroll();
    };

    options.init();
  };
}));


(function(code){
    code(window.jQuery, document, window);
}(function($, document, window){
    $(function(){
        $('nav.navbar').scrollClass({
            'class':'bar',
            'offset':function(){
                return $('#install-with-bower').offset().top - $('nav.navbar').outerHeight();
            }
        });
    });
}));

nav.navbar{position:fixed;background:#ddd;width:100%;font-weight:bold;}
.progressing p{color:red;}
.regressing p{color:blue;}
.bar p{color:green;}
.hoge{padding-top:100px;}

<nav class="navbar navbar-default navbar-fixed-top">
<p>    foo</p>
</nav>



<div class="container">
   

    <section id="usage" class="panel">
<div class="hoge">
<p>hoge</p>
<p>hoge</p>
<p>hoge</p>
<p>hoge</p>
<p>hoge</p>
<p>hoge</p>
<p>hoge</p>
<p>hoge</p>
<p>hoge</p>
<p>hoge</p>
<p>hoge</p>
<p>hoge</p>
<p>hoge</p>
<p>hoge</p>
<p>hoge</p>
<p>hoge</p>
<p>hoge</p>
<p>hoge</p>
<p>hoge</p>
<p>hoge</p>
<p>hoge</p>
<p>hoge</p>
<p>hoge</p>
<p>hoge</p>
<p>hoge</p>
<p>hoge</p>
  <section id="install-with-bower" class="panel">
<p>   piyo</p>
    </section>
<p>hoge</p>
<p>hoge</p>
<p>hoge</p>
<p>hoge</p>
<p>hoge</p>
<p>hoge</p>
<p>hoge</p>
<p>hoge</p>
<p>hoge</p>
<p>hoge</p>
<p>hoge</p>
<p>hoge</p>
<p>hoge</p>
<p>hoge</p>
<p>hoge</p>
<p>hoge</p>
<p>hoge</p>
<p>hoge</p>
<p>hoge</p>
<p>hoge</p>
<p>hoge</p>
<p>hoge</p>
</div>
    </section>
   
</div>