Доброго времени суток, дорогой читатель! Сегодня я покажу Вам как делать меню фиксированным. Главную роль в достижении цели будет играть свойство fixed CSS стиля — position. На второй роли будет скрипт jQuery, который будет менять класс меню. Этот скрипт нам понадобится в случае расположения меню не в верхней части страницы. Решать эту задачу будем двумя способами — своими силами и с помощью Twitter Bootstrap Framework.

Допустим у нас есть HTML код с двумя меню — вверху и слева страницы (для наглядности примера работы Twitter Bootstrap Framework я взял HTML код с его классами):

<!-- Верхнее меню -->
<nav class="navbar navbar-default navbar-fixed-top" role="banner">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="/" class="navbar-brand">Мой сайт</a>
</div>
<nav class="collapse navbar-collapse" role="navigation">
<ul class="nav navbar-nav">
<li>
<a href="/">Главная</a>
</li>
<li>
<a href="/articles/">Статьи</a>
</li>
</ul>
</nav>
</div>
</nav>
<!-- Меню слева--> <div class="col-md-3" id="leftMenu">
<ul class="nav navbar-nav" id="sidebar">
<li><a href="#">Статья 1</a></li>
<li><a href="#">Статья 2</a></li>
</ul>
</div>

Фиксирование верхнего меню

В случае, когда верхнее меню находится на самом верху страницы, все что нам нужно — это прописать в классе navbar-fixed-top CSS стиль position: fixed; top: 0; z-index: 10;

z-index может быть любой, но больше чем у объектов на странице, иначе меню "спрячется" за ними.

Если на Вашем сайте подключен Twitter Bootstrap Framework, класс navbar-fixed-top укажет странице нужные стили для фиксации верхнего меню.

Фиксирование меню, находящегося ниже верхнего края страницы

Как я говорил ранее для этого нам понадобится скрипт jQuery, который будет менять класс меню при скроллинге страницы:

$(document).ready(function(){
var nav = $('#leftMenu');
if( !nav.length ) return;
var navTop = nav.offset().top;
var win = $(window);
function scrolled(){
nav.toggleClass('affix',win.scrollTop() > navTop);
}
win.scroll(scrolled);
scrolled();
});

Чтобы использовать этот скрипт для верхнего меню, просто меняем строку var nav = $('#leftMenu'); на var nav = $('nav');

В случае использования Boostrap вместо этого кода используем:

$('#sidebar').affix({
   offset: {
     top: 235
   }
});

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

Если у Вас появились ко мне вопросы по данной статье, задавайте их в комментариях ниже.