tryfoundation_topbar_sticky 在线代码实例

 <div>
  <h1>导航栏绝对定位</h1> 
  <h3>滚动时固定导航栏。</h3>
  <p>我们可以将导航栏放在 <code>&lt;div class="sticky"&gt;</code> 内来设置导航栏的绝对定位，当滚动条滚到到该区域时，该导航栏就像固定导航栏一样在顶部不动:</p>
</div>

<div class="sticky">
  <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>Some text to enable scrolling</h2>
<h2>Some text to enable scrolling</h2>
<h2>Some text to enable scrolling</h2>
<h2>Some text to enable scrolling</h2>
<h2>Some text to enable scrolling</h2>
<h2>Some text to enable scrolling</h2>
<h2>Some text to enable scrolling</h2>

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