响应式标题和麦哲伦fixed_top选项

Question

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

麦哲伦选项的内联特性胜过了我在媒体查询中用来更改它的所有css。

我也尝试过交换来交换价值，但都无济于事。

Answer 1

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

1. 从data-magellan-expedition属性中删除fixed。麦哲伦将不再处理固定定位
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>

注意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;
   }
}