Foundation sticky header first scroll

Question

I'm using Foundation 5 and the sticky header.

Here is my code:

<header>
  <div class="sticky">
    <nav class="top-bar" data-topbar role="navigation">
      <!-- Blablabla -->
    </nav>
  </div>
</header>

The problem with this version is that when I scroll down for the first time, the sticky header doesn't work. I have to scroll down, then up to the top of the page and after the sticky header works.

After that, I've add the class fixed <div class="sticky fixed"> but once the page is loaded, this hide my element on the top of the page instead of going above them.

So my workaround is to add, then remove the class fixed after the page has been loaded. With that change, the header gets sticky during the first scroll, but it looks like to not be the perfect solution, and it has side effects :/

$('header .sticky').addClass("fixed");
$('header .sticky').removeClass("fixed");

Another solution is to fixe the header and apply a margin-top to all elements. But we loose the benefits of the sticky class.

Any idea for a better solution / find the source of the issue?

Brett DeWoody Brett DeWoody · Accepted Answer · 2015-11-04T07:03:31

Sounds like you're using .sticky when you only need to use .fixed. The difference is:

.fixed is for when the topbar is positioned at the top of the page.
.sticky is for when the topbar isn't at the top of the page.

If your topbar starts at the top of the page use:

<div class="fixed">
  <nav class="top-bar" data-topbar role="navigation">
    <nav class="top-bar" data-topbar role="navigation">
      <!-- Blablabla -->
    </nav>
  </nav> 
</div>

If your topbar starts at a position down the page use:

<div class="contain-to-grid sticky">
  <nav class="top-bar" data-topbar role="navigation" data-options="sticky_on: large">
    <!-- Blablabla -->
  </nav>
</div>

Foundation sticky header first scroll

1 Answers