Отзывчивые заголовки и опция fixed_top Magellan
Как определить разные значения fixed_top в опциях magellan или css, чтобы приспособить разные высоты заголовка на разных устройствах? Высота моего заголовка варьируется от 60px в среднем до 120px в целом.
Встроенная природа опций Магеллана превосходит все CSS, которые я использую, чтобы изменить это в моих медиа-запросах.
Я также попытался обмен, чтобы поменять значения безрезультатно.
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]);
Выше добавит класс 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;
}
}