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

«Бложка»

Наш Блог

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

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

Сейчас я расскажу, как можно сделать фиксированное меню средствами 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() вычисляем расстояние от верха страницы до текущей позиции скроллера прокрутки. На основании расчета позиционируем блок с меню.

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