Headroom.js header with initial static state

I'm using the awesome Headroom.js plugin to build an auto-hiding header. The header is static from start and becomes pinned after an offset (when scrolling down) and then back to static (when it's back to the top).

Here is what I have done: http://codepen.io/netgloo/pen/KmGpBL

but I got 2 problems:

• scrolling down from top: when the header becomes pinned, I see it slides down and suddenly slides up
• scrolling up from middle page: when the header arrives to the offset it disappears, but I need keeping it pinned to the top

Someone could give me some help or ideas? Thanks

Here is how I initialize the plugin:

var myElement = document.querySelector("header");

var headroom  = new Headroom(myElement, {
  "offset": 150,
  "tolerance": 0,
});

headroom.init();