Get Skrollr and Waypoints to work together

Question

I ran into some trouble whene trying to use skrollr and waypoints together. What I wanted to do is have a sticky header that shrinks (using skrollr for this) and get waypoints to handle the sticky part. But the problem I was facing was that waypoints still got the height of the header, before it was shrunk. I though offset would fix the problem, but it does not. My JS knowledge is not that good, so I'd be extremely glad if someone could help me.

I built a codepen that hopefully illustrates my problem a bit better:

http://codepen.io/bekreatief/pen/zxGXNB

<header data-0="height: 300px;" data-50="height: 100px;">
    <h1 data-0="font-size: 80px;" data-50="font-size: 0px;">HEADING</h1>
    <nav></nav>
</header>

skrollr.init(smoothScrolling=true);
$('header').waypoint('sticky', {offset:-50});

Edit: Could you maybe tell waypoints to measure the height at a later point? Because what offset seems to do is just fire the stickyness? How would you go about doing this?