So you’ve created your website’s navigation. Great! But wait... you noticed that your webpages are fairly long and are concerned your user will lose context or have trouble getting back to the navigation. With Foundation 6, you can use the Sticky component to make something stick to the top of the page, even when the menu is not at the top. In this lesson, you’ll learn how to use the Sticky plugin to create a navigation that follows the user down the page as they scroll.

Let’s begin with your simple Top Bar menu:

<div class="top-bar">
  <div class="top-bar-title">
    <img src="http://placehold.it/150x38" alt="" />
  </div>
  <div class="top-bar-right">
    <ul class="menu">
      <li><a href="#">Thing 1</a></li>
      <li><a href="#">Thing 2</a></li>
      <li><a href="#">Thing 3</a></li>
    </ul>
  </div>
</div>

Adding Sticky

The first step is to wrap an element in the sticky container. This is a data-attribute that tells the Foundation JavaScript to read the height of the element within it. This will help in situations where you want the Sticky plugin to stop being sticky. An example would be a sticky sidebar that needs to stop before it overlaps the footer.

<div data-sticky-container>

</div>

Inside the sticky container, we’ll add the sticky element.

<div data-sticky-container>
  <div data-sticky data-margin-top='0'>
  <!-- menu goes here-->
  </div>
</div>

Let’s break this down.

• The data-sticky attribute activates the JavaScript
• data-margin-top='0' sets the top margin when the the sticky element is sticky (meaning the the sticky element has touched the top of the viewport while scrolling). You can use this data-attribute to space the sticky element away from the top if needed.

We chose to wrap the menu inside the sticky element because it is easier to style. You can add the sticky component directly to the <div class="top-bar">.

Great! Now we have a simple menu that is fixed to the top of the viewport. But what if you actually have a header that goes above it?

Anchoring the Sticky Menu

You can tell the Sticky element to anchor to something on a page. Let’s say we have a header:

<header id="header" class="header">
  <img src="http://placehold.it/2000x500">
</header>

We want to anchor the menu to the bottom of the header and have the Sticky behavior. This means the page will scroll and when the sticky menu reaches the top of the viewport, then it will stay at the top while scrolling. If the user scrolls back up beyond the header, the menu will reset itself to the bottom of the header.

Here’s how we’ll achieve this:

<div data-sticky-container>
  <div data-sticky data-margin-top='0' data-top-anchor="header:bottom"
  data-btm-anchor="content:bottom">
  <!-- menu goes here -->
  </div>
</div>

Let’s break this down.

• The data-top-anchor="header:bottom" will point to the id of the header, in this case #header. :bottom will anchor it to the bottom of the header.
• data-btm-anchor="content:bottom" set’s the bottom stop for the sticky behavior. In this case we have a wrapper around the content with an id=”content”. At the bottom of this, the sticky menu will stop being sticky.

Putting it all together

<header id="header" class="header">
</header>

<div data-sticky-container>
  <div data-sticky data-margin-top='0' data-top-anchor="header:bottom"
  data-btm-anchor="content:bottom">
    <div class="top-bar">
      <div class="top-bar-title">
        <img src="http://placehold.it/150x38" alt="" />
      </div>
      <div class="top-bar-right">
        <ul class="menu">
          /a></li>
          <li><a href="#">
          Thing 1</a></li>
          <li><a href="#">
          Thing 2</a></li>
          <li><a href="#">
          Thing 3</a></li>
        </ul>
      </div>
    </div>
  </div>
</div>

<div class='column row' id="content">
  <h3 class='text-center'>Creating a sticky Navigation Menu with Top Bar!</h3>
  <img src="http://placehold.it/1200x300">
  <img src="http://placehold.it/1200x300">
  <img src="http://placehold.it/1200x300">
  <img src="http://placehold.it/1200x300">
  <img src="http://placehold.it/1200x300">
  <img src="http://placehold.it/1200x300">
</div>

The Sticky component in Foundation has tons of configurations that you can use to anchor it to things or space away from. Now that you know two of the most used configurations, you can use it confidently. Go out and build something amazing! If you make something you’re really proud of, get in touch with us, we’d love to check it out!

Link to demo and code

---