Все владельцы сайтов постоянно сталкиваются с проблемой улучшения навигации по сайту и просто удобства пользования им. Одной из интересных и нужных примочек для сайта является фиксация меню при прокрутке, т.е. по мере просмотра информации менюшка следует за пользователем позволяя ему в любой момент перейти на другую категорию.
Однако интернет полнится множеством подобных решений фиксации меню при прокрутке, но зачастую реализация этих скроллингов довольно громоздко и трудно для установки. В этой инструкции будет предложена наиболее простейший вариант фиксации меню:
-
Структура меню не имеет особого значения, для примера возьмем вот такую:
<div id="menu" class="default"> <ul> <li><a href="#">Главная</a></li> <li><a href="#">Joolma</a></li> <li><a href="#">WordPress</a></li> <li><a href="#">HTML5&CSS3</a></li> <li><a href="#">PHP</a></li> </ul> </div>
-
Для работы фиксации меню подключаем jQuery и стили css
<script>$(document).ready(function(){ var $menu = $("#menu"); $(window).scroll(function(){ if ( $(this).scrollTop() > 100 && $menu.hasClass("default") ){ $menu.removeClass("default").addClass("fixed"); } else if($(this).scrollTop() <= 100 && $menu.hasClass("fixed")) { $menu.removeClass("fixed").addClass("default"); } });//scroll });</script>
-
CSS стили:
#menu.fixed { position:fixed; top:0; left:0; width:100%; }
Вот собственно и весь скрипт для фиксации меню при прокрутке на jQuery. Для краткого пояснения в пункте 1, 2 и 3 заменяем id="menu" (в стилях #menu) и class="default"(в стилях .default) на свои id и класс. "fixed" в коде пункта 2 не трогаем.
Пример усложненной работы можете посмотреть здесь http://jsfiddle.net/zStXH/. Так же можете скачать полный пример с красивостями при прокрутке меню
По материалам: http://webcomplex.com.ua/jquery/delaem-fiksirovannoe-menyu-pri-prokrutke-stranicy.html