Sticky навигация

Sticky навигация представляет собой фиксированное меню, которое остаётся видимым при прокрутке страницы, обеспечивая удобный доступ к основным разделам контента. Smooth Scroll позволяет плавно перемещать пользователя к нужной секции при клике на ссылку меню, улучшая UX и создавая визуально приятный эффект.

Ключевые компоненты реализации включают:

  1. HTML-разметка навигации
<header id="header">
  <nav class="sticky-nav">
    <ul>
      <li><a href="#section1">Раздел 1</a></li>
      <li><a href="#section2">Раздел 2</a></li>
      <li><a href="#section3">Раздел 3</a></li>
      <li><a href="#section4">Раздел 4</a></li>
    </ul>
  </nav>
</header>

<section id="section1">Контент 1</section>
<section id="section2">Контент 2</section>
<section id="section3">Контент 3</section>
<section id="section4">Контент 4</section>

Важно: ссылки навигации должны точно соответствовать id секций, чтобы Smooth Scroll корректно определял цель.

  1. CSS для закрепления навигации
.sticky-nav {
  position: sticky;
  top: 0;
  background-color: #fff;
  z-index: 1000;
  border-bottom: 1px solid #ddd;
}

.sticky-nav ul {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.sticky-nav li {
  margin-right: 20px;
}

.sticky-nav a {
  text-decoration: none;
  color: #333;
  padding: 15px 10px;
  display: block;
  transition: color 0.3s;
}

.sticky-nav a.active {
  color: #007BFF;
  border-bottom: 2px solid #007BFF;
}

position: sticky удерживает навигацию в верхней части окна при прокрутке. Стили активного элемента помогают визуально выделять текущий раздел.

  1. Подключение Smooth Scroll
import SmoothScroll from 'smooth-scroll';

const scroll = new SmoothScroll('.sticky-nav a[href*="#"]', {
  speed: 600,
  offset: 70,
  updateURL: false,
  easing: 'easeInOutCubic'
});

Пояснение параметров:

  • speed: длительность прокрутки в миллисекундах.
  • offset: смещение для учёта высоты фиксированного меню.
  • updateURL: при false URL не меняется при прокрутке.
  • easing: функция сглаживания движения.
  1. Подсветка активного раздела при скролле Для полноценной интерактивной навигации требуется отслеживать текущую позицию на странице:
const sections = document.querySelectorAll('section');
const navLinks = document.querySelectorAll('.sticky-nav a');

window.addEventListener('scroll', () => {
  let current = '';
  
  sections.forEach(section => {
    const sectionTop = section.offsetTop - 80; // учитываем offset навигации
    if (window.scrollY >= sectionTop) {
      current = section.getAttribute('id');
    }
  });

  navLinks.forEach(link => {
    link.classList.remove('active');
    if (link.getAttribute('href') === `#${current}`) {
      link.classList.add('active');
    }
  });
});

Эта логика обновляет класс active в реальном времени, делая навигацию динамичной.

  1. Учет динамического контента и адаптивности Если высота контента или шапки меняется при загрузке изображений или при адаптивном дизайне, необходимо пересчитывать offsetTop секций. Для этого удобно использовать resize и load события:
window.addEventListener('resize', updateOffsets);
window.addEventListener('load', updateOffsets);

function updateOffsets() {
  sections.forEach(section => {
    section.dataset.offsetTop = section.offsetTop;
  });
}

После этого можно использовать dataset.offsetTop вместо offsetTop в обработчике скролла, что обеспечивает корректное выделение активной ссылки.

  1. Улучшение UX с debounce для скролла Чтобы уменьшить нагрузку на браузер при прокрутке, применяют дебаунс:
function debounce(func, wait = 20) {
  let timeout;
  return function() {
    clearTimeout(timeout);
    timeout = setTimeout(() => func.apply(this, arguments), wait);
  };
}

window.addEventListener('scroll', debounce(updateActiveLink));

Это особенно важно при длинных страницах и больших навигационных меню.

  1. Дополнительные возможности
  • Скрытие/появление навигации при прокрутке вниз/вверх: добавление класса hidden при scrollY увеличивается, удаление при прокрутке вверх.
  • Интеграция с анимацией контента: секции можно плавно появляться при прокрутке через Intersection Observer.

Sticky навигация в сочетании с Smooth Scroll создаёт удобный и современный интерфейс, позволяя пользователю ориентироваться на странице без резких прыжков. При правильной настройке offset, активной подсветке и учёте адаптивного контента навигация остаётся стабильной и предсказуемой.

Оглавление