Работа с фиксированными элементами

Intro.js позволяет создавать интерактивные пошаговые гиды по веб-страницам. Одной из ключевых задач при работе с элементами интерфейса является корректная работа с фиксированными (fixed) элементами, такими как панели навигации, плавающие кнопки и другие элементы, остающиеся на экране при прокрутке страницы. Без правильной настройки подсказки могут отображаться некорректно или скрываться за другими слоями.

Проблемы с фиксированными элементами

Фиксированные элементы в HTML имеют свойство position: fixed, что выводит их из обычного потока документа и привязывает к окну браузера. При этом подсказки Intro.js, по умолчанию, рассчитывают позицию относительно обычного DOM-потока, что может приводить к следующим проблемам:

  1. Смещение подсказки при прокрутке страницы – подсказка остаётся на месте относительно элемента, но сама страница прокручивается.
  2. Перекрытие элементов – fixed-элемент может закрывать подсказку, если z-index подсказки ниже.
  3. Неправильное позиционирование стрелок и оверлея – визуальные маркеры могут «отставать» от элемента при изменении размеров окна или прокрутке.

Настройка позиции для fixed-элементов

Intro.js предоставляет возможность управлять позиционированием подсказок через атрибуты данных и API. Для fixed-элементов важно использовать следующие методы:

1. Использование data-position

<div id="menu" class="fixed-menu" data-intro="Это панель навигации" data-position="right">
  Меню
</div>
  • Атрибут data-position задаёт место появления подсказки относительно элемента (top, right, left, bottom).
  • Для fixed-элементов чаще всего оптимально использовать top или right, чтобы подсказка не смещалась при прокрутке.

2. Принудительная фиксация подсказки

Intro.js автоматически добавляет подсказку в DOM вне фиксированного элемента. Чтобы подсказка оставалась «привязанной» к fixed-элементу при прокрутке, используется опция tooltipPosition:

introJs().setOptions({
  steps: [
    {
      element: document.querySelector('#menu'),
      intro: 'Это фиксированная панель навигации',
      position: 'right'
    }
  ],
  tooltipPosition: 'auto'
}).start();
  • tooltipPosition: 'auto' позволяет библиотеке адаптировать позицию, учитывая прокрутку.
  • В некоторых случаях рекомендуется использовать CSS-класс с position: fixed для подсказки, чтобы она «следила» за элементом при скролле.

Управление z-index подсказок

Чтобы fixed-элемент не перекрывал подсказку, важно корректно настроить слои отображения:

.fixed-menu {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 1000;
}

.introjs-tooltip {
  z-index: 1100;
}
  • Значение z-index подсказки должно быть выше, чем у фиксированного элемента.
  • Для overlay можно использовать z-index: 1050, чтобы подсветка элемента оставалась над фоном, но под подсказкой.

Работа с динамическими fixed-элементами

Фиксированные элементы часто изменяют размер или положение при интерактивных действиях пользователя. Intro.js предоставляет метод refresh() для обновления позиции подсказок:

const intro = introJs();

intro.setOptions({
  steps: [
    {
      element: '#menu',
      intro: 'Фиксированная панель',
      position: 'bottom'
    }
  ]
});

intro.start();

// После изменения размеров fixed-элемента
window.addEventListener('resize', () => {
  intro.refresh();
});
  • Метод refresh() пересчитывает координаты подсказки относительно текущего положения элемента.
  • Рекомендуется вызывать refresh() при изменении DOM, прокрутке, или изменении размеров окна.

Советы по использованию fixed-элементов

  1. Минимизировать количество подсказок на fixed-элементах – чем меньше шагов, тем проще контролировать позицию.
  2. Использовать прозрачный overlay – позволяет подсветить элемент, не закрывая его полностью.
  3. Следить за адаптивностью – fixed-элементы на мобильных устройствах могут занимать всю ширину, что влияет на видимость подсказки.
  4. Комбинировать data-position и tooltipPosition – помогает добиться корректного отображения в любых сценариях.

Пример комплексного использования

<div id="topbar" class="fixed-topbar" data-intro="Верхняя панель" data-position="bottom">
  Панель управления
</div>

<script>
  const intro = introJs();
  intro.setOptions({
    steps: [
      {
        element: '#topbar',
        intro: 'Эта панель всегда сверху',
        position: 'bottom'
      },
      {
        element: '#content',
        intro: 'Основной контент страницы',
        position: 'right'
      }
    ],
    tooltipPosition: 'auto',
    showStepNumbers: false
  });
  
  intro.start();

  window.addEventListener('scroll', () => {
    intro.refresh();
  });
</script>
  • Верхняя панель остаётся видимой, а подсказка корректно позиционируется под ней.
  • Подсказка автоматически обновляется при прокрутке страницы.

Эта методика позволяет Intro.js работать корректно с любыми фиксированными элементами, обеспечивая стабильное отображение подсказок, правильную подсветку элементов и адаптивность интерфейса при изменении размеров окна и скролле.

Оглавление