Как зафиксировать меню при прокрутке css
Перейти к содержимому

Как зафиксировать меню при прокрутке css

  • автор:

Как закрепить меню при скроле?

делаю копию тильдовского сайта на вордпрессе. Возникла сложность. В оригинальном сайте, меню фиксируется к верхней части браузера, при скроллинге. Вот: https://ninjamail.click/ На странице над которой работаю, пока такого нет. Вот: https://page.ninjamail.click/bbd90894-b711-4d53-b1cf-486c29b83971/ Как можно на второй странице сделать точно такой же скроллинг? Не через css fixed, а чтобы меню закреплялось при прокрутке на определённое колличество пикселей, как в первом сайте? Спасибо всем, кто поможет.

Отслеживать

задан 18 авг 2022 в 8:05

7 4 4 бронзовых знака

это в любом случае делается через css fixed, просто свойство добавляется при прокрутке на определённое количество пикселей и убирается при прокрутке обратно

18 авг 2022 в 8:14

@humster_spb как можно сделать чтобы оно появлялось при прокрутке?

Отвечаем на вопросы

Как сделать фиксированное меню при прокрутке страницы в шаблоне ST-Universal

Для фиксировании меню при прокрутке страницы можно использовать следующий способ

В файл index.php перед закрываюшим тегом вставьте следующий код

script type="text/javascript"> jQuery(function() jQuery(window).scroll(function()  if(jQuery(this).scrollTop() >= 290)  jQuery('.top-menu.row').addClass('fixedtop'); > else jQuery('.top-menu.row').removeClass('fixedtop'); > >); >); script>

В файл template.css добавьте

ul.top-menu.row.fixedtop position: fixed; width: 100%; margin-left: 0; margin-right: 0; top: 0; left: 0; z-index: 20; border-top-left-radius: 0; border-top-right-radius: 0; >

Для отключения фиксации меню на разрешениях экрана меньше 768 px после строки @media (max-width: 767.98px) < добавьте

ul.top-menu.row.fixedtop position: inherit; margin-left: -15px; margin-right: -15px; width: auto >

Зафиксировать меню и сайдбар (position: sticky)

В CSS 3 для свойства position появилось новое значение «sticky», которая закрепляет элемент в пределах родительского тега.

 class="page">  class="top-panel">Фиксированная панель в пределах родительского тега .page /* CSS */ .top-panel < position: sticky; top: 0; >

Одно из основных преимуществ данного свойства перед position: fixed в том, что вёрстка не рушится, если элементу задать значение «sticky».

Значение «sticky» работает во всех современных браузерах (не работает в Internet Explorer, но поддерживается в Internet Edge).

Закрепить только меню, без шапки

Если при прокрутке вниз, закреплять надо только меню (без шапки), для этого также достаточно указать свойство position: sticky .

 class="page"> .  class="top-panel">Панель, которая при прокрутке будет закрепляться сверху страницы и возвращаться на исходную позицию при прокрутке в начало страницы 

Закрепить сайдбар

Чтобы закрепить сайдбар, для него также достаточно указать свойство position: sticky . При этом, сайдбар будет закреплён только в пределах своего родительского тега, т.е. он не будет вылезать, например, в подвал сайта.

Обновлено: 01 ноября 2020

  • Вывод нескольких элементов в ряд (Flexbox)
  • Различия между float и flex
  • Хлебные крошки (Breadcrumbs)
  • Прижать футер к низу сайта
  • Выровнять дочерние элементы по ширине
  • Зафиксировать меню и сайдбар (position: sticky)
  • Вертикальное выравнивание
  • Порядок элементов (order)
  • Разница между «px», «em» и «rem»
  • 8 советов вёрстки и настройки email-рассылок
  • Переместить объект, не влияя на вёрстку
  • Пример использования «box-decoration-break»

Как зафиксировать меню при прокрутке css

Чтобы зафиксировать меню при прокрутке страницы с помощью CSS, вы можете использовать свойство position и задать значение fixed для элемента меню.

Например, предположим, что у вас есть меню с классом menu и вы хотите зафиксировать его при прокрутке страницы. Вот пример CSS-кода, который можно использовать для достижения этой цели:

.menu  position: fixed; top: 0; left: 0; width: 100%; > 

Здесь мы устанавливаем свойство position в значение fixed , чтобы зафиксировать меню на экране при прокрутке. Затем мы устанавливаем свойства top , left и width , чтобы разместить меню вверху страницы и растянуть его на всю ширину страницы.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *