Question

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

Magellan选项的内联性质胜过我在媒体查询中用来改变这一点的所有CSS。

我也试过交换换掉值无济于事。

Answer 1

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

从fixed属性中删除data-magellan-expedition。麦哲伦将不再处理固定定位
添加一个“断点”脚本，用于向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]);

如果用户滚动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;
   }
}

响应式标头和Magellan的fixed_top选项

1 个答案: