zurb-foundation-5 - 响应式标题和 Magellan 的 fixed_top 选项

Question

如何在 magellan 的选项或 css 中定义不同的 fixed_top 值，以适应各种设备上的不同标头高度？我的页眉高度从中等的 60 像素到大的 120 像素不等。

Magellan 选项的内联性质胜过我用来在媒体查询中更改它的所有 css。

我也尝试过交换以换出值，但无济于事。

Answer 1

我有同样的问题。目前还没有真正的方法可以单独使用 Magellan 来解决这个问题，因为它使用固定参数设置偏移量。我已经应用了以下修复：

1. fixed从data-magellan-expedition属性中删除。麦哲伦将不再处理固定定位
2. 添加一个“断点”脚本，将类添加到body可用于应用媒体查询的类中。这些断点类也可用于其他应用程序。一个例子：

假设你的 html 是这样的：

<div data-magellan-expedition class="your-magellan-nav-bar">
  <div data-magellan-arrival="some-header">
    <a href="#some-header">
  </div>
</div>

<!-- ... -->

<h3 data-magellan-destination="some-header">Some Header</h3>
<a name="some-header></a>

请注意fixed.data-magellan-expedition="fixed"

现在将一些 JS 添加到您的文档中：

function activateScrollpoints(scrollPoints) {
  var $window = $(window);
  var $body = $(document.body);
  var tId = null;

  function onScroll() {
    var windowScrollTop = $window.scrollTop();

    scrollPoints.forEach(function(point) {
      $body.toggleClass('break-'+point, windowScrollTop >= point);
    });

    tId = setTimeout(function() {
      clearTimeout(tId);
      window.requestAnimationFrame(onScroll);
    }, 100);
  }

  window.requestAnimationFrame(onScroll);
}

activateScrollpoints([310, 500]);

break-310一旦用户滚动超过 310 像素，上面将添加一个类，break-500如果用户滚动 310 像素，则添加另一个类。

现在在您的 CSS 中，您可以执行以下操作：

@media #{$medium-up} {
   body.break-310 .your-magellan-nav-bar {
      position: fixed;
      top: 310px; /* Some value for your offset */
      left: 0px;
   }
}

@media #{$small-only} {
   body.break-500 .your-magellan-nav-bar {
      position: fixed;
      top: 500px; /* Some value for your offset */
      left: 0px;
   }
}