Решён
Как зафиксировать меню категорий товаров в верхней части страницы при прокрутке?

Question

Решён
Как зафиксировать меню категорий товаров в верхней части страницы при прокрутке?

CSS Wizard • HTML/CSS •

5 дней назад

1.1k

5

Делаю интернет магазин на чистом HTML/CSS/JS. Есть горизонтальное меню с категориями товаров под шапкой сайта.

Нужно чтобы при скролле вниз это меню оставалось видимым (прилипало к верху экрана), а шапка уезжала вверх как обычно.

Пробовал position: fixed - меню фиксируется, но при этом наезжает на контент и ломает всю верстку. Как правильно реализовать такое поведение?

CSS HTML JavaScript Верстка Фиксированное меню

Alex_Frontend · Answer 1 · 2026-04-09T21:27:14+03:00

Решение

104

Alex_Frontend Участник • 2 ответа

5 дней назад

Используй position: sticky вместо fixed.

.menu {
  position: sticky;
  top: 0;
  z-index: 100;
  background: white;
}

Sticky работает как relative до тех пор пока элемент не достигнет указанной позиции (в данном случае top: 0), после чего ведет себя как fixed но не выпадает из потока документа. Контент не съезжает.

Обязательно укажи background чтобы меню не было прозрачным при наложении на контент. И z-index чтобы меню было поверх всего.

CSS Wizard Автор 5 дней назад

Офигеть, не знал про sticky. Работает идеально, спасибо!

Марина Frontend · Answer 2 · 2026-04-09T22:53:37+03:00

Если нужна поддержка старых браузеров (sticky работает с IE11+ частично), используй JS:

const menu = document.querySelector('.menu');
const menuOffset = menu.offsetTop;

window.addEventListener('scroll', () => {
  if (window.pageYOffset >= menuOffset) {
    menu.classList.add('fixed');
  } else {
    menu.classList.remove('fixed');
  }
});

В CSS:

.menu.fixed {
  position: fixed;
  top: 0;
  width: 100%;
}

.menu.fixed + * {
  margin-top: 60px; /* высота меню */
}

Когда меню получает класс fixed, следующему элементу добавляется верхний отступ равный высоте меню, чтобы контент не прыгал.

Старый Пыховик · Answer 3 · 2026-04-10T07:36:37+03:00

38

Старый Пыховик Эксперт • 2 ответа

4 дня назад

sticky это топ, только не забудь что родитель должен иметь overflow: visible (по дефолту так и есть). Если где то выше стоит overflow: hidden или auto - sticky работать не будет.

Сергей Верстальщик · Answer 4 · 2026-04-10T10:05:20+03:00

А зачем вообще фиксировать меню? Пользователь хочет листать контент, а не чтобы меню занимало место на экране постоянно. Особенно на мобилках это бесит - половина экрана под интерфейс, половина под товары.

Лучше сделай кнопку "наверх" в углу, по клику возвращает к меню.

Дима Фриланс · Answer 5 · 2026-04-11T08:34:05+03:00

6

Дима Фриланс Участник • 3 ответа

3 дня назад

можно еще через intersection observer сделать но это сложнее для новичков

Помогли .ру

Решён
Как зафиксировать меню категорий товаров в верхней части страницы при прокрутке?

5 ответов

Написать ответ