粘滞顶酒吧滚动过去，它与Zurb基金会时，使页面蹿升(A sticky Top Bar makes

我使用我的网站Zurb基金会4框架。我想有一个定位，当你滚动过去的那支页面顶部的标题下方的导航栏。这工作得很好，但在最上面一栏粘在页面顶部的页面内容跳起来〜45个像素。该效果可以看到这个页面上，虽然这是一个不同的导航元素： http://foundation.zurb.com/docs/components/magellan.html

是否有某种方式来解决这个问题，或者我必须改变我的网站的设计，以适应这个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>

Answer 1:

这似乎是在基金会4的JavaScript中的硬编码的“功能”。而不是仅仅阻止链接的默认行为，它会自动强制链接重定向到# ，这将导致浏览器跳转到页面顶部。这似乎是故意的（更多的在第二）。

现在唯一的选择是只不使用顶栏组件和使用其他更可靠的基础组件创建自己的导航。举例来说，你可以很轻松地同时使用建立自己的导航.sticky类，并简单地定义一个新的<nav>所有必要的元素<ul>中的菜单项。

最上面一栏有设计...点击“菜单”非常具体的使用将使用JavaScript显示导航为下顶栏选择一列。为了确保移动用户可以滚动大集的选项，这个跳跃窗口页面的顶部，并去除fixed ，直至关闭菜单行为。这工作得很好，当你顶酒吧开始在页面的顶部，但有严重的影响，当它没有（例如，滚动到页面的顶部可能移动的菜单拿出来看）。

现在，这是纯粹的意见了......但我真的不是基金会的顶酒吧执行的粉丝。可用性测试已经表明，把您的手机菜单中的页脚和链接到他们有固定的更有效和用户友好。您可以使用.hide-for-small ，以隐藏桌面菜单项和.show-for-small透露自己的自定义，挂靠“菜单”链接...该菜单链接将锚定到移动设备专用的菜单中你的页脚（同样，你将与显示.show-for-small ）。

长话短说：顶杆从可用性的角度来看草率和破碎（设计）为您的使用情况。我建议建立自己的粘菜单:-)

Answer 2:

这个问题是固定的： https://github.com/zurb/foundation/issues/1993

回答：

如果你不希望它跳到顶端指定数据选项：

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

或初始化：

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

Answer 3:

删除“粘”类，如果你不需要它。为我工作。

Answer 4:

本页内容： https://github.com/jordanmerrick/foundation/commit/47391710c7b6d30ad54e50f3b2526cb8f6184be1

我发现在foundation.topbar.js，将填充取决于顶栏是否有粘性或不body标签的代码：

if ($('.sticky').length > 0) {
   var distance = $('.sticky').length ? $('.sticky').offset().top: 0,
       $window = $(window);
      var offst = $('nav.top-bar').outerHeight()+20;
     (".sticky").after("<div class='top-bar-sticky-padding'></div>");
     $window.scroll(function() {
       if ( $window.scrollTop() >= ( distance ) ) {
          $(".sticky").addClass("fixed");

- $（ '主体'）的CSS（ '填充顶'，offst）; }

      else if ( $window.scrollTop() < distance ) {
         $(".sticky").removeClass("fixed");

- $（ '主体'）的CSS（ '填充顶部'， '0'）; }}）; }

我不是一个javascript向导 - 但它好像不是offst设置为.TOP杆的高度，你就直接设置为.TOP杆粘补的值，就可以控制与偏移媒体查询，而不是强迫的偏移顶栏的大小。

我错了吗？我很担心“黑客核心”，但是这似乎已经解决了这个问题对我来说。

文章来源: A sticky Top Bar makes the page jump up when scrolling past it with Zurb Foundation