Отзывчивые заголовки и опция fixed_top Magellan

Как определить разные значения fixed_top в опциях magellan или css, чтобы приспособить разные высоты заголовка на разных устройствах? Высота моего заголовка варьируется от 60px в среднем до 120px в целом.

Встроенная природа опций Магеллана превосходит все CSS, которые я использую, чтобы изменить это в моих медиа-запросах.

Я также попытался обмен, чтобы поменять значения безрезультатно.

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 если пользователь прокручивает 310px.

Теперь в вашем 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;
   }
}
Другие вопросы по тегам