我使用this solution在基金会6中创建了一个粘性导航。我不喜欢这样做的事情是覆盖基础内容，所以以下部分的背景图像实际上在页面加载的导航下方可见，而不是仅在滚动时显示。
CodePen： http://codepen.io/rtourtelot/pen/obBQqE
<div id="page">
<div class="top-bar-container" data-sticky-container>
<div class="sticky" data-sticky data-options="anchor: page; marginTop: 0; stickyOn: small;">
<div class="top-bar">
<div class="row column">
<div class="top-bar-left">
<ul class="dropdown menu" data-dropdown-menu>
<li class="menu-text">Site Title</li>
<li class="has-submenu">
<a href="#">One</a>
<ul class="submenu menu vertical" data-submenu>
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
</ul>
</li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
</ul>
</div>
<div class="top-bar-right">
<ul class="menu">
<li>
<input type="search" placeholder="Search">
</li>
<li>
<button type="button" class="button">Search</button>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="hero large-12-columns">
</div>
<div class="large-12 columns">
<div class="callout">
<h3>We’re stoked you want to try Foundation! </h3>
<p>To get going, this file (index.html) includes some basic styles you can modify, play around with, or totally destroy to get going.</p>
<p>Once you've exhausted the fun in this document, you should check out:</p>
<div class="row">
<div class="large-4 medium-4 columns">
<p><a href="http://foundation.zurb.com/docs">Foundation Documentation</a>
<br />Everything you need to know about using the framework.</p>
</div>
<div class="large-4 medium-4 columns">
<p><a href="http://zurb.com/university/code-skills">Foundation Code Skills</a>
<br />These online courses offer you a chance to better understand how Foundation works and how you can master it to create awesome projects.</p>
</div>
<div class="large-4 medium-4 columns">
<p><a href="http://foundation.zurb.com/forum">Foundation Forum</a>
<br />Join the Foundation community to ask a question or show off your knowlege.</p>
</div>
</div>
<div class="row">
<div class="large-4 medium-4 medium-push-2 columns">
<p><a href="http://github.com/zurb/foundation">Foundation on Github</a>
<br />Latest code, issue reports, feature requests and more.</p>
</div>
<div class="large-4 medium-4 medium-pull-2 columns">
<p><a href="https://twitter.com/ZURBfoundation">@zurbfoundation</a>
<br />Ping us on Twitter if you have questions. When you build something with this we'd love to see it (and send you a totally boss sticker).</p>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="large-8 medium-8 columns">
<h5>Here’s your basic grid:</h5>
<!-- Grid Example -->
<div class="row">
<div class="large-12 columns">
<div class="primary callout">
<p><strong>This is a twelve column section in a row.</strong> Each of these includes a div.callout element so you can see where the columns are - it's not required at all for the grid.</p>
</div>
</div>
</div>
<div class="row">
<div class="large-6 medium-6 columns">
<div class="primary callout">
<p>Six columns</p>
</div>
</div>
<div class="large-6 medium-6 columns">
<div class="primary callout">
<p>Six columns</p>
</div>
</div>
</div>
<div class="row">
<div class="large-4 medium-4 small-4 columns">
<div class="primary callout">
<p>Four columns</p>
</div>
</div>
<div class="large-4 medium-4 small-4 columns">
<div class="primary callout">
<p>Four columns</p>
</div>
</div>
<div class="large-4 medium-4 small-4 columns">
<div class="primary callout">
<p>Four columns</p>
</div>
</div>
</div>
<hr />
<h5>We bet you’ll need a form somewhere:</h5>
<form>
<div class="row">
<div class="large-12 columns">
<label>Input Label</label>
<input type="text" placeholder="large-12.columns" />
</div>
</div>
<div class="row">
<div class="large-4 medium-4 columns">
<label>Input Label</label>
<input type="text" placeholder="large-4.columns" />
</div>
<div class="large-4 medium-4 columns">
<label>Input Label</label>
<input type="text" placeholder="large-4.columns" />
</div>
<div class="large-4 medium-4 columns">
<div class="row collapse">
<label>Input Label</label>
<div class="input-group">
<input type="text" placeholder="small-9.columns" class="input-group-field" />
<span class="input-group-label">.com</span>
</div>
</div>
</div>
</div>
<div class="row">
<div class="large-12 columns">
<label>Select Box</label>
<select>
<option value="husker">Husker</option>
<option value="starbuck">Starbuck</option>
<option value="hotdog">Hot Dog</option>
<option value="apollo">Apollo</option>
</select>
</div>
</div>
<div class="row">
<div class="large-6 medium-6 columns">
<label>Choose Your Favorite</label>
<input type="radio" name="pokemon" value="Red" id="pokemonRed">
<label for="pokemonRed">Radio 1</label>
<input type="radio" name="pokemon" value="Blue" id="pokemonBlue">
<label for="pokemonBlue">Radio 2</label>
</div>
<div class="large-6 medium-6 columns">
<label>Check these out</label>
<input id="checkbox1" type="checkbox">
<label for="checkbox1">Checkbox 1</label>
<input id="checkbox2" type="checkbox">
<label for="checkbox2">Checkbox 2</label>
</div>
</div>
<div class="row">
<div class="large-12 columns">
<label>Textarea Label</label>
<textarea placeholder="small-12.columns"></textarea>
</div>
</div>
</form>
</div>
<div class="large-4 medium-4 columns">
<h5>Try one of these buttons:</h5>
<p><a href="#" class="button">Simple Button</a>
<br/>
<a href="#" class="success button">Success Btn</a>
<br/>
<a href="#" class="alert button">Alert Btn</a>
<br/>
<a href="#" class="secondary button">Secondary Btn</a></p>
<div class="callout">
<h5>So many components, girl!</h5>
<p>A whole kitchen sink of goodies comes with Foundation. Check out the docs to see them all, along with details on making them your own.</p>
<a href="http://foundation.zurb.com/sites/docs/" class="small button">Go to Foundation Docs</a>
</div>
</div>
</div>
</div>
无论如何，我在下面的部分尝试过使用margin-top：-40px，但它很不稳定，并且效果不佳。我也尝试为siteNavStickyWrap制作 data-margin-top =＆＃34; .1＆＃34; ，但也是如此。
有没有人找到一种干净，稳定的方式在Foundation 6中使用粘性导航，在加载时自动覆盖粘性导航到底层页面内容？
谢谢！