使用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中的硬编码"功能".它不会仅仅阻止链接的默认行为,而是自动强制链接重定向到#,这会导致浏览器跳转到页面顶部.这似乎是故意的(更多内容在一秒钟内).

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

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

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

长话短说:Top Bar从可用性的角度来说是草率的,并且(根据设计)打破了你的用例.我建议你建立自己的粘性菜单:-)

Answer 2

此问题已得到修复:https://github.com/zurb/foundation/issues/1993

回答:

如果您不希望它跳转到顶部指定数据选项:

<nav class="top-bar" data-options="scrolltop: false">

或初始化:

$(document).foundation('topbar', {scrolltop: false});