Zurb foundation 基础响应切换下拉导航，即Sticky 我是基金会的新手，我尝试通过使用他们提供的类和数据属性，在HTML中，将基础的几个组件混合到一个导航条中。

我在以下位置按照响应切换下拉列表的说明操作：

我想让它粘起来。请参阅：，“创建带有标题栏、下拉菜单和粘性的粘性导航菜单！”

他们省略了切换部分，所以我不知道仅仅使用他们为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>

水果是好的

水果不错

---

您可以在这里找到演示：

好的，我想出来了。我使用类顶栏来实现一些功能，例如响应性、嵌套性。“粘性”似乎需要一类标题栏。在导航类中，我将顶部栏更改为标题栏。当前的代码可能与上面的代码略有不同，因为从上一篇文章开始我就一直在胡闹。但最后的调整才是区别所在，即导航类中的顶部栏到标题栏。实际上，这不起作用。它修复了下拉列表位于标注或jumbotron下方的问题。但现在它不再粘了。