Official JsFiddle Foundation 5.2.3

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/foundation/5.2.3/js/vendor/modernizr.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/foundation/5.2.3/css/foundation.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/foundation/5.2.3/js/foundation.min.js"></script>
    <div class="sticky">
      <nav class="top-bar" data-topbar role="navigation">
        <section class="top-bar-section">
          <ul class="left">
            <li><a href="#/intro">Intro</a></li>
            <li><a href="#/basic">Basic</a></li>
          </ul>
        </section>
      </nav>
    </div>

    <div class="row">
      <div class="small-12 columns">
        <a name="/intro"></a>
        <h2>Intro</h2>
          <p>I should be able to see 'Intro' header, but the top bar hides it.</p>
      </div>
    </div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <div class="row">
      <div class="small-12 columns">
        <a name="/basic"></a>
        <h2>Basic</h2>
          <p>I should be able to see 'Basic' header, but the top bar hides it.</p>
      </div>
    </div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

JavaScript

$(document).foundation();