jQuery and minimal version of headroom.js http://wicky.nillia.ms/headroom.js/ demo http://jsfiddle.net/JNAQD/1/

jquery-headroom.css

.headroom {
  position: fixed;
  top: 0;
  -webkit-transition: top 0.15s;
  transition: top 0.15s;
}
.headroom-hidden {
  top: -60px;
}

jquery-headroom.js

$(function () {
  $('.headroom').each(function () {
    var $win = $(window)
      , $self = $(this)

      , isHidden = false
      , lastScrollTop = 0

    $win.on('scroll', function () {
      var scrollTop = $win.scrollTop()
      var offset = scrollTop - lastScrollTop
      lastScrollTop = scrollTop

      // min-offset, min-scroll-top
      if (offset > 10 && scrollTop > 200 ) {
        if (!isHidden) {
          $self.addClass('headroom-hidden')
          isHidden = true
        }
      } else if (offset < -10 || scrollTop < 200) {
        if (isHidden) {
          $self.removeClass('headroom-hidden')
          isHidden = false
        }
      }
    })
  })
})

Thank you so much for this. Trying to get headroom.js to work was such a pain!