Ответственные заголовки и параметр fixed_top Magellan

Question

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

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

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

Answer 1

У меня была та же проблема. В настоящее время на самом деле нет способа исправить это только с помощью Magellan, поскольку он использует фиксированные параметры, устанавливающие смещение. Я применял следующие исправления:

1. Удалить fixed из атрибута data-magellan-expedition. Magellan больше не будет обрабатывать фиксированное позиционирование
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 как только пользователь прокручивает более 310px и другой класс 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; 
    } 
}