Сервисный центр Чипсет. Ремонт компьютеров в Павловском Посаде Телефон сервисного центра чипсет 8(967) 239 06 24

«Бложка»

Наш Блог
Все статьи...

«Хи-Хи» «Ха-Ха»

Приколы
Все приколы...

Наш Блог

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

В последнее время я замечаю, что на множестве сайтов используется так называемое фиксированное (прилипающее) меню. Обычно это горизонтальное меню. Вообще, зафиксировать можно любое меню: и горизонтальное, и вертикальное. Как это работает – при загрузке страницы меню находится в определенном месте страницы (например, под «шапкой»), а при прокрутке страницы оно фиксируется вверху окна браузера и не прокручивается, как остальное содержимое. Если же посетитель прокручивает страницу вверх и достигает начала страницы, меню возвращается на свое место. Таким образом, посетитель, находясь в любом месте страницы, может его использовать и переходить на другие страницы сайта. Это очень удобно и соответствует принципам юзабилити.

Сейчас я расскажу, как можно сделать фиксированное меню средствами jQuery. Как оказалось, это несложно - код состоит всего из нескольких строчек.

Вариант №1

В первом варианте рассмотрим случай, когда «шапка» сайта имеет небольшую высоту (например, 150px) меню расположено под ней, при прокрутке оно фиксируется вверху страницы. В этом варианте страницы все довольно просто и обычно.

Для начала нужно создать страницу.

Страница с верхним фиксированным меню

При помощи CSS устанавливаем высоту «шапки» и создаем правила для блока с меню.

/*шапка*/
header{
height:150px;
}
/*фиксированное плавающее меню*/
#top_nav{
top: 150px; /*высота шапки в пикселях*/
position: fixed;
z-index: 1000;
}

Теперь переходим к написанию скрипта на jQuery, который будет фиксировать меню вверху страницы при прокрутке.

<script>
var h_hght = 150; // высота шапки
var h_mrg = 0; // отступ когда шапка уже не видна
$(function(){
$(window).scroll(function(){
var top = $(this).scrollTop();
var elem = $('#top_nav');
if (top+h_mrg < h_hght) {
elem.css('top', (h_hght-top));
} else {
elem.css('top', h_mrg);
}
});
});
</script>

В скрипте создаем 2 переменные в которые сохраняем значения высоты шапки и отступа блока с меню сверху. Отступ может отсутствовать (как в данном случае). Затем пишем обработчик на событие onScroll объекта window. В нем с помощью метода scrollTop() вычисляем расстояние от верха страницы до текущей позиции скроллера прокрутки. На основании расчета позиционируем блок с меню.
Автор: Yorku, ©"Копипаст"

На правах рекламы:
Портал RusDayZ Standalone. Сервера. Кланы. RPG
Кинотеатр Павловский
Сервер Altis Life - это живой остров, на котором перед вами открываются безграничные возможности по отыгрышу любой роли, существуют определенные законы, порядок и экономика.
Видеонаблюдение. Быстро и качественно.
Сайт зарегистрирован в каталоге Top2Web.ru
Ремонт компьютеров и ноутбуков в Павловском Посаде.
Яндекс.Метрика Разработка и управление 4ip_OS™

4ipset.ru® - Ремонт компьютеров, ремонт мониторов, ремонт сотовых телефонов, заправка картриджей и создание сайтов в Павловском Посаде.