My Gist to make a stick to top kinda header

stick.js.coffee

$(document).ready ->
  StickTop.initApp()

@StickTop =
  app:
    initHeaderBinding: (headerSelector)->
      $(window).on "scroll", ()->
        if $('body').scrollTop() > 65
          $(headerSelector).addClass('fixed-to-top')
          $('.stick-top').slideDown(400)
          $('body').css({'margin-top': '60px'})
        else
          $(headerSelector).removeClass('fixed-to-top').removeAttr('style')
          $('body').css({'margin-top': '0px'})
  initApp: ()->
    @app.initHeaderBinding('#header')

style.css.scss

#header{
  margin: 0 auto;
  background: #ccc;
  &.stick-top {
    min-height: 61px;
  }
  &.fixed-to-top { // Added using Javascript
    position: fixed;
    top: 0;
    left: 0;
    display: none;
    z-index: 1200;
    right: 0;
    box-shadow: 1px 3px 10px #888;
    opacity: 0.98;
  }
}