html - 使用 Zurb Foundation 滚动经过时，粘性顶部栏会使页面跳起来

Question

我正在为我的站点使用 Zurb Foundation 4 框架。我想要一个导航栏，该导航栏位于标题下方，当您滚动过去时该标题会粘在页面顶部。这工作正常，除了当顶部栏粘在页面顶部时页面内容会跳起 ~45 像素。可以在此页面上看到效果，尽管这是一个不同的导航元素:http://foundation.zurb.com/docs/components/magellan.html

有什么方法可以解决这个问题，还是我必须更改我的网站设计以适应这个错误？

文档在这里:http://foundation.zurb.com/docs/components/top-bar.html

<div class="contain-to-grid sticky">
 <nav class="top-bar">
      <ul class="title-area">
        <!-- Title Area -->
        <li class="name">
          <h1><a href="/">Top Bar</a></h1>
        </li>
        <!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
        <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
      </ul>

      <section class="top-bar-section">
        <ul class="left">
          <li class="divider"></li>
          <li class="has-dropdown"><a href="/grid.php">Item 1</a>

            <ul class="dropdown">
              <li><label>Level One</label></li>
              <li><a href="#">Sub-item 1</a></li>
              <li><a href="#">Sub-item 2</a></li>
              <li class="divider"></li>
              <li><a href="#">Sub-item 3</a></li>
              <li class="has-dropdown"><a href="#">Sub-item 4</a>

                <ul class="dropdown">
                  <li><label>Level Two</label></li>
                  <li class="has-dropdown"><a href="#">Sub-item 1</a>

                    <ul class="dropdown">
                      <li><label>Level Three</label></li>
                      <li class="has-dropdown"><a href="#">Sub-item 1</a>

                        <ul class="dropdown">
                          <li><label>Level Four</label></li>
                          <li><a href="#">Sub-item 1</a></li>
                        </ul>
                      </li>
                      <li><a href="#">Sub-item 2</a></li>
                      <li><a href="#">Sub-item 3</a></li>
                      <li class="divider"></li>
                      <li><a href="#">Sub-item 4</a></li>
                    </ul>
                  </li>
                  <li><a href="#">Sub-item 2</a></li>
                  <li><a href="#">Sub-item 3</a></li>
                  <li><a href="#">Sub-item 4</a>
                </ul>
              </li>
              <li><a href="#">Sub-item 5</a></li>
            </ul>
          </li>
          <li class="divider"></li>
        </ul>
        <!-- Right Nav Section -->
        <ul class="right">
          <li class="divider hide-for-small"></li>
          <li><a href="#">Item 2</a></li>
        </ul>
      </section>
    </nav>

Answer 1

这似乎是 Foundation 4 的 Javascript 中的硬编码“功能”。它不仅会阻止链接的默认行为，还会自动强制链接重定向到 #。 ，这会导致浏览器跳转到页面顶部。这似乎是故意的(稍后会详细介绍)。

目前唯一的选择是不使用顶部栏组件并使用其他更可靠的 Foundation 组件创建您自己的导航。例如，您可以使用 .sticky 轻松构建自己的导航。类并简单地定义一个新的 <nav>所有必要的元素 <ul>内的菜单项。

顶部栏在设计上有非常特殊的用途...单击“菜单”将使用 Javascript 将导航显示为顶部栏下的单列选项。为了确保移动用户可以滚动大量选项，这会将窗口跳转到页面顶部并删除 fixed。行为，直到您关闭菜单。当您的顶部栏从页面顶部开始时，此方法效果很好，但如果不是，则会产生严重影响(例如，滚动到页面顶部可能会使菜单移出 View )。

现在，这纯粹是个人意见...但我真的不是 Foundation 的 Top Bar 实现的粉丝。可用性测试表明，将您的移动菜单放在页脚中并使用 anchor 链接到它们更有效并且用户友好。您可以使用 .hide-for-small隐藏您的桌面菜单项和.show-for-small显示您自己的自定义锚定“菜单”链接...该菜单链接将锚定到页脚中的特定于移动设备的菜单(同样，您将使用 .show-for-small 显示)。

长话短说:从可用性的角度来看，Top Bar 很草率，并且(按设计)不适合您的用例。我建议构建您自己的粘性菜单 :-)