[SOLVED] Materialize pushpin scrolling jumps

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>

Solution

In case it helps anyone here's the solution:

Wrap the navbar in a div with a fixed height equal to the navbar. When pushpin changes the navbar from relative to fixed, this changes the way it takes up space in the document. The wrapper div with a set height will conserve that space regardless of the navbar positioning.

HTML

<div id="wrapper">
    <nav id="navbar">
        ...
    </nav>
</div>

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

CSS

#wrapper {
    //height equal to height of navbar
    height: 64px;
}