Сегодня мы фиксируем меню при прокрутке страницы, рассмотрим лучший вариант реализации.

Всех желающих купить ОСАГО и диагностическую карту приглашаем посетить сайт osagomarket.ru, на котором можно быстро и, главное, удобно приобрести страховку для автомобиля.

Как мы фиксируем меню?

Есть 2 способа фиксировать меню:

  • Фиксировать меню только если страница прокрутилась достаточно вниз
  • Фиксировать меню постоянно

Фиксируем меню при прокрутке страницы

Для этого способа потребуется JS и CSS. Сначала нам потребуется определить насколько сильно страница прокрутилась вниз, а затем, если это значение больше определенного (например больше размера экрана) зафиксируем меню. Рассмотрим на примере:

$(window).scroll(function(){
  var docscroll=$(document).scrollTop();
  if(docscroll>$(window).height()){
    $('nav').css({'height': $('nav').height(),'width': $('nav').width()}).addClass('fixed');
  }else{
    $('nav').removeClass('fixed');
  }
});

То есть при прокрутке страницы мы проверяем «больше ли величина прокрутки страницы, чем высота окна», и если больше — добавляем класс fixed к нашему меню (и указываем высоту и ширину, потому, что при использовании position: fixed теряются размеры блока), в противном случае — удаляем этот класс.

Дальше в дело вступает CSS:

.fixed{
  position: fixed;
  top:0;
  left: 0;
}

То, есть при наличии такого класа объект станет фиксированным.

Готово. Меню будет фиксироваться только тогда, когда пользователь прокрутит страницу больше, чем на размер экрана. Конечно можно сделать фиксацию меню после того, как пользователь прокрутит страницу на величину самого меню, или на какое-то заране заданное значение.

Фиксируем меню всегда (второй вариант фиксации)

Для этого способа нам просто понадобиться CSS. Мы навсегда зафиксируем меню, и при желании сделаем верхний отступ у body, чтобы при нулевой прокрутке меню не наезжало на остальной контент.

nav{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 30px;
}
body{
  padding-top: 30px;
}

Вот и всё. Надеюсь этот материал поможет вам разобраться в этом вопросе.