用Zurb基金会滚动浏览时，粘贴顶部栏使页面跳起来 [英] A sticky Top Bar makes the page jump up when scrolling past it with Zurb Foundation

问题描述

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

有没有办法解决这个问题，还是必须将我的网站设计更改为容纳这个bug？

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

 < div class =包含网格粘性> 
< nav class =top-bar> 
< ul class =title-area> 
 <！ - 标题区域 - > 
< li class =name> 
< h1>< a href =/> Top Bar< / a>< / h1> 
< / li> 
<！ - 删除类menu-icon以摆脱菜单图标。拿出菜单只有图标 - > 
< li class =toggle-topbar menu-icon>< a href =＃>< span>菜单< / span>< / a>< / li> 
< / ul> 
 
< section class =top-bar-section> 
< ul class =left> 
< li class =divider>< / li> 
< li class =has-dropdown>< a href =/ grid.php>第1项< / a> 
 
< ul class =dropdown> 
< li>< label>第一级< / label>< / li> 
< li>< a href =＃>子项目1< / a>< / li> 
< li>< a href =＃>子项目2< / a>< / li> 
< li class =divider>< / li> 
< li>< a href =＃>子项目3< / a>< / li> 
< li class =has-dropdown>< a href =＃>子项目4< / a> 
 
< ul class =dropdown> 
< li>< label>二级< / label>< / li> 
< li class =has-dropdown>< a href =＃>子项目1< / a> 
 
< ul class =dropdown> 
< li>< label>三级< / label>< / li> 
< li class =has-dropdown>< a href =＃>子项目1< / a> 
 
< ul class =dropdown> 
< li>< label>四级< / label>< / li> 
< li>< a href =＃>子项目1< / a>< / li> 
< / ul> 
< / li> 
< li>< a href =＃>子项目2< / a>< / li> 
< li>< a href =＃>子项目3< / a>< / li> 
< li class =divider>< / li> 
< li>< a href =＃>子项目4< / a>< / li> 
< / ul> 
< / li> 
< li>< a href =＃>子项目2< / a>< / li> 
< li>< a href =＃>子项目3< / a>< / li> 
< li>< a href =＃>子项目4< / a> 
< / ul> 
< / li> 
< li>< a href =＃>子项目5< / a>< / li> 
< / ul> 
< / li> 
< li class =divider>< / li> 
< / ul> 
 <！ - 右侧导航部分 - > 
< ul class =right> 
< li class =divider hide-for-small>< / li> 
< li>< a href =＃>第2项< / a>< / li> 
< / ul> 
< / section> 
< / nav> 
  

解决方案

这似乎是Foundation 4 Javascript中的一个硬编码功能。它不会仅仅阻止链接的默认行为，而是自动强制链接重定向到＃，这会导致浏览器跳转到页面的顶部。这似乎是有意为之的（更多关于这一点）。

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

顶部栏有一个非常具体的用途，点击菜单将使用Javascript将导航作为顶栏中的一列选项显示。为了确保移动用户可以滚动一大组选项，这会将窗口跳转到页面的顶部，并删除固定行为，直至关闭菜单。当顶部条从页面顶部开始时，这种方式已经足够好了，但当它不存在时会产生严重的影响（例如，滚动到页面顶部可能会将菜单移出视图）。

现在，这完全是个人意见......但我真的不是 ，这是Foundation Top Bar实施的粉丝。可用性测试表明，将您的移动菜单放入页脚并通过锚链接到它们会更有效和用户友好。您可以使用 .hide-for-small 来隐藏桌面菜单项，并使用 .show-for-small 来显示你自己的习惯，锚定的菜单链接...该菜单链接将锚定到您的页脚中特定于移动设备的菜单（同样，您可以使用> .show-for-small


长话短说：从可用性的角度来看，Top Bar是蛮横的，并且在您的用例中被破坏（按设计）。我建议建立你自己的粘性菜单： - ）

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?

The documentation is here: 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>

解决方案

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).

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.

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).

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).

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基金会滚动浏览时，粘贴顶部栏使页面跳起来的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！