使用 Zurb Foundation 滚动经过时，粘性顶部栏使页面

问题描述

我正在为我的网站使用 Zurb Foundation 4 框架.我想要一个导航栏，它位于标题下方，当您滚动过去时，该标题会粘在页面顶部.这很好用，除了当顶部栏粘在页面顶部时页面内容会向上跳跃约 45 像素.虽然这是一个不同的导航元素，但可以在此页面上看到效果:http://Foundation.zurb.com/docs/components/magellan.html

I am using the Zurb Foundation 4 framework for my site. I want to have a navbar that is positioned beneath a header that sticks to the top of the page when you scroll past. This works fine, except that the page content jumps up ~45 pixels when the Top Bar sticks to the top of the page. The effect can be seen on this page, though this is a different navigation element: http://foundation.zurb.com/docs/components/magellan.html

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

Is there some way to fix this, or do I have to change my site design to accomodate this bug?

文档在这里: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>

推荐答案

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

This appears to be a hard-coded "feature" in Foundation 4's Javascript. Instead of merely preventing the default behavior of the link, it automatically forces the link to redirect to #, which causes the browser to jump to the top of the page. This appears to be intentional (more on that in a second).

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

The only alternative for now is to just not use the Top Bar component and create your own navigation using other, more reliable Foundation components. For instance, you can build your own navigation easily enough using both the .sticky class and simply defining a fresh <nav> element with all necessary <ul> menu items within.

顶部栏在设计上有一个非常具体的用途...单击菜单"将使用 Javascript 将导航显示为顶部栏下的单列选项.为了确保移动用户可以滚动大量选项，这会将窗口跳转到页面顶部并删除 fixed 行为，直到您关闭菜单.当您的顶部栏从页面顶部开始时，这可以很好地工作，但当它不是时会产生严重影响(例如，滚动到页面顶部可能会将菜单移出视图).

The Top Bar has a very specific use by design... clicking "Menu" will use Javascript to reveal the navigation as a single column of options under the Top Bar. To ensure that mobile users can scroll a big set of options, this jumps the window to the top of the page and removes the fixed behavior until you close the menu. This works well enough when your Top Bar starts at the top of the page, but has serious implications when it doesn't (for instance, scrolling to the top of the page might move the menu out of view).

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

Now, this is purely opinion... but I'm really not a fan of Foundation's Top Bar implementation. Usability tests have shown that putting your mobile menus in the footer and linking to them with an anchor are more efficacious and user-friendly. You can use .hide-for-small to hide your desktop menu items and .show-for-small to reveal your own custom, anchored "Menu" link... that menu link would anchor to a mobile-specific menu in your footer (which again, you would reveal with .show-for-small).

长话短说:从可用性的角度来看，Top Bar 很草率，并且(根据设计)对于您的用例来说是损坏的.我建议建立自己的粘性菜单:-)

Long story short: Top Bar is sloppy from a usability standpoint and broken (by design) for your use-case. I'd recommend building your own sticky menu :-)

这篇关于使用 Zurb Foundation 滚动经过时，粘性顶部栏使页面跳起来的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持html5模板网！