tryfoundation_topbar_fixed 在线代码实例

 <div class="fixed">
  <nav class="top-bar" data-topbar="">
    <ul class="title-area">
      <li class="name">
        <h1><a href="#">WebSiteName</a></h1>
      </li>
       <!-- 小屏幕上折叠按钮: 去掉 .menu-icon 类，可以去除图标。 
      如果需要只显示图片，可以删除 "Menu" 文本 -->
      <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
    </ul>

    <section class="top-bar-section">
      <ul class="left">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Page 1</a></li>
        <li><a href="#">Page 2</a></li>
        <li><a href="#">Page 3</a></li>    
      </ul>
    </section>
  </nav>
</div>

<h2>搞定头部导航栏实例</h2>
<p>导航栏可以在页面滚动时固定在页面顶部。</p><br>
<h1>滚动 iframe 中的页面查看效果。</h1>

<!-- 初始化 Foundation JS -->
<script>
$(document).ready(function() {
    $(document).foundation();
})
</script>