我是基金会的新手，我正在尝试将基金会的几个组件混合到一个导航栏中，只需使用他们提供的类和数据属性，并在他们的HTML中进行演示。
我按照http://foundation.zurb.com/sites/docs/responsive-navigation.html
的说明执行了响应式切换下拉菜单的说明而且我想做那个Sticky。请参阅：http://foundation.zurb.com/sites/docs/sticky.html#sticky-navigation，'使用标题栏创建粘性导航菜单，DropdownMenu和Sticky！'
他们省略了切换部分，因此我不知道这是否可行，只使用它们为html提供的类和数据属性。
我可以让他们分开工作但不能一起工作。它似乎有点儿，但它可能是我。我很乐意听到那些可能成功完成此事的人的消息！
这是我到目前为止所拥有的。更宽的窗口是粘性和响应性的。下拉最初落后于jumbotron，直到你向上滚动一下。
窄窗口的响应切换工作但粘性不起作用。最初的下降是在jumbotron下方，直到你稍微扩大窗口。钻取工作正常。
这是代码：
<div class="row">
<div data-sticky-container>
<div class="top-bar" data-responsive-toggle="main-menu" data-hide-for="medium" data-sticky data-options="marginTop:0;" style="width:100%" data-top-anchor="1">
<button class="menu-icon" type="button" data-toggle></button>
<div class="top-bar-title">Fruit Is Good</div>
</div>
</div>
<div data-sticky-container>
<nav class="top-bar" id="main-menu" data-sticky data-options="marginTop:0;" style="width:100%" >
<div class="top-bar-left">
<ul class="vertical medium-horizontal menu" data-responsive-menu="drilldown medium-dropdown" style="width: 300px;">
<li class="menu-text">Fruit Is Good</li>
<li class="active"><a href="home.html">Home</a></li>
<li><a href="apples.html">Apples</a></li>
<li><a href="#">Citrus</a>
<ul class="vertical menu">
<li><a href="oranges.html">Oranges</a></li>
<li><a href="#">Limes</a></li>
<li><a href="#">Lemons</a></li>
</ul>
</li>
<li><a href="bananas.html">Bananas</a></li>
<li><a href="gallery.html">Gallery</a></li>
</ul>
</div>
</nav>
</div>
</div>