How to show elements only if the top-bar is stickied to the top? - Zurb Foundation

Question

I have a top-bar menu but when the page loads it's somewhere in the middle of the page. When I scroll up, I set it to become sticky so it will then get pinned to the top as I scroll through the page. My question is, how do I make it so that some of the elements inside the top-bar only appear when it is already stickied to the top? When it is not stickied to the top, I want to hide some of the elements.

Answer 1

<style>
  .only-sticky{
    display: none;
  }
  .fixed .only-sticky{
    display: inline-block;
  }
</style>
<div class="contain-to-grid sticky">
  <nav class="top-bar" data-topbar data-options="sticky_on: large">
    <a href="#" class="small button">always visible</a>
    <a href="#" class="small button success only-sticky">visible only on sticky</a>
  </nav>
</div>