响应式报头和麦哲伦的fixed_top选项

Question

我如何在麦哲伦的选项中定义不同的CSS值，以适应不同设备上不同的fixed_top高度？我的标题高度从中号的60px到大号的120px不等。

麦哲伦选项的内联特性胜过我在媒体查询中用来改变这一点的所有css。

我也曾尝试交换一些值，但都无济于事。

Answer 1

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

1. 从data-magellan-expedition属性中删除fixed。麦哲伦将不再处理fixed-positioning
2. Add，这是一个向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>

请注意data-magellan-expedition="fixed"中缺少的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]);

上面的代码将在用户滚动超过310px时添加一个类break-310，如果用户滚动超过310px，则添加另一个类break-500。

现在，在你的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;
   }
}