Menu icon Foundation
Sticky topbar building block scrolls slightly

I implemented the sticky-topbar building block but the whole topbar appears to scroll down slightly before sticking (basically to the top of the menu items). In the inspector it shows these changes occurring:

Scrolled to the top:

<div class="sticky sticky-topbar is-anchored is-at-top" data-sticky="4b6y84-sticky" data-options="anchor: page; marginTop: 0; stickyOn: small;" data-resize="t2452g-sticky" data-mutate="t2452g-sticky" data-events="mutate" style="max-width: 1124px; margin-top: 0px; bottom: auto; top: 0px;">

As I scroll down:

<div class="sticky sticky-topbar is-at-top is-stuck" data-sticky="4b6y84-sticky" data-options="anchor: page; marginTop: 0; stickyOn: small;" data-resize="t2452g-sticky" data-mutate="t2452g-sticky" data-events="mutate" style="max-width: 1124px; margin-top: 0em; bottom: auto; top: 0px;">

 

As you can see, there's a change in that initial class from "is-anchored is-at-top" to "is-at-top is-stuck". Any ideas on how to get the nav bar to not scroll at all?

 

sticky-topbarbuilding blocks

I implemented the sticky-topbar building block but the whole topbar appears to scroll down slightly before sticking (basically to the top of the menu items). In the inspector it shows these changes occurring:

Scrolled to the top:

<div class="sticky sticky-topbar is-anchored is-at-top" data-sticky="4b6y84-sticky" data-options="anchor: page; marginTop: 0; stickyOn: small;" data-resize="t2452g-sticky" data-mutate="t2452g-sticky" data-events="mutate" style="max-width: 1124px; margin-top: 0px; bottom: auto; top: 0px;">

As I scroll down:

<div class="sticky sticky-topbar is-at-top is-stuck" data-sticky="4b6y84-sticky" data-options="anchor: page; marginTop: 0; stickyOn: small;" data-resize="t2452g-sticky" data-mutate="t2452g-sticky" data-events="mutate" style="max-width: 1124px; margin-top: 0em; bottom: auto; top: 0px;">

 

As you can see, there's a change in that initial class from "is-anchored is-at-top" to "is-at-top is-stuck". Any ideas on how to get the nav bar to not scroll at all?

 

Rafi Benkual over 2 years ago

 Can you share an example, maybe a codepen so we can help more?