Materialize pushpin scrolling jumps

So I have a strange issue with scrolling when using the pushpin functionality on a navbar element.

When scrolling down on the page, once the pushpin navbar reaches the top where it becomes fixed, the content on the page jumps upward suddenly.

Here's a codepen to illustrate what I mean

If someone can point to what I'm doing wrong, I would be very grateful.

My initialization of pushpin:

$('#navbar').pushpin({
    top: $('#wrapper').offset().top
});

General HTML Structure:

<div class="intro">
    ...
</div>
<div id="wrapper">
    <nav id="navbar">
        ...
    </nav>
    <div class="content">
        ...
    </div>
</div>