5

我正在为我的网站使用 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>

4

4 回答 4

11

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

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

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

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

长话短说：从可用性的角度来看，Top Bar 是草率的，并且对于您的用例而言（按设计）是损坏的。我建议建立自己的粘性菜单:-)

于 2013-04-01T23:08:54.130 回答
6

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

回答：

如果您不希望它跳到顶部，请在 data-options 中指定：

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

或初始化：

$(document).foundation('topbar', {scrolltop: false});
于 2014-04-30T10:29:34.977 回答
2

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

于 2013-08-20T19:41:51.803 回答
1

在此页面上：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");

- $('body').css('padding-top',offst); }

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

- $('body').css('padding-top','0'); } }); }

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

我错了吗？我对“黑客核心”感到紧张，但这似乎已经为我解决了这个问题。

于 2013-08-08T16:27:36.423 回答