sticky topbar

sticky-topbar.js

      //Calculate the height of <header>
      //Use outerHeight() instead of height() if have padding
      var aboveHeight = $('#topbar').outerHeight();

      // on scroll event
      $(window).scroll(function(){
          //if scrolled down more than the header's height
          if ($(window).scrollTop() > aboveHeight){

              $('#topbar').addClass('sticky').fadeIn();
              
            } else {
              // when scroll up or less than aboveHeight, 
              // remove the "fixed" class, and the padding-top
              $('.sticky')
                .css( 'margin-top', aboveHeight + 50 )
                .animate({ 'margin-top' : 0 }, 'fast', function(){
                  $(this).removeAttr('style');
                })
                .removeClass('sticky');
          }
      });