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从页面顶部开始时，这种方法效果很好，但如果没有，则会产生严重影响（例如，滚动到页面顶部可能会使菜单移出视图）。

现在，这纯粹是意见......但我 真的不是 粉丝的Top Bar实施的粉丝。可用性测试表明，将您的移动菜单放在页脚中并使用锚链接到它们更有效和用户友好。您可以使用.hide-for-small隐藏桌面菜单项，.show-for-small显示您自己的自定义固定“菜单”链接...该菜单链接将锚定到您页脚中的移动专用菜单（再次，你会透露.show-for-small）。

长话短说：Top Bar从可用性角度看起来很邋and，而且（根据设计）打破了你的用例。我建议你建立自己的粘性菜单： - ）

Answer 2

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

<强>答案：

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

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

或初始化：

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

Answer 3

如果您不需要，请删除“sticky”类。为我工作。

Answer 4

在此页面上：https://github.com/jordanmerrick/foundation/commit/47391710c7b6d30ad54e50f3b2526cb8f6184be1

我在foundation.topbar.js中找到了代码，该代码根据top-bar是否粘滞来为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");

- $（'body'）。css（'padding-top'，offst）; }

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

- $（'body'）。css（'padding-top'，'0'）; } }）; }

我不是一个javascript向导 - 但似乎不是设置为.top-bar的高度，而是直接将其设置为.top-bar-sticky-padding的值，你可以控制使用媒体查询的偏移量，而不是强制偏移顶部条的大小。

我错了吗？我对“破解核心”感到紧张，但这似乎解决了我的问题。

使用Zurb Foundation滚动浏览页面时，粘性顶栏会使页面跳起来

4 个答案: