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

Итак, задача на сегодня сделать меню, которое прилипает к верхней части браузера при прокрутке страницы.

HTML структура меню

Безусловно, чтобы наше меню приобрело узнаваемый вид, мы его немного стилизуем.

CSS код меню

Теперь после всех подготовительных работ мы можем приступить к решению самой задачи.

Для того чтобы меню прилипало к верху при прокрутке, нам необходимо две вещи:

  • Первая – знать в какой позиции находится скрол браузера. При прокрутки страницы в нужный момент изменить стиль нашего меню.
  • Вторая — создать отдельный класс для меню с фиксированною позицией и шириной на весь экран.

Что касается первой задачи, то с ней справится небольшой код jQuery, но сначала мы создадим отдельный стиль для нашего фиксированного и стандартного меню.

Отдельный классы для фиксированного и нормального состояния меню

Добавим новый класс к меню

jQuery код

Теперь код для первой задачи:

Думаю, что код настолько прост, что в пояснении не нуждается. Но все же прокомментирую. Мы используем событие скролл окна браузера для постоянного отслеживания позиции полосы прокрутки, при данном событии. Написали условия проверки позиции скрола и состояния меню (фиксированное или нет), если мы прокрутили страницу вниз на указанное значение, то появляется фиксированный вариант. Второе условие для смены с фиксированного меню на стандартное.

Вот в принципе и вся реализация, но мы на этом не остановимся и пойдем дальше.

Немного CSS3 для красоты 🙂

Стилизуем наше меню с помощью CSS3, добавим теней, округлим углы и т. д. Добавим еще оин класс. alpha-bg, который будет содержать значения фона в формате rgba. Конечный вариант стилей:

Получили красоту.

Добавим jQuery эффекты.

Теперь можно поиграться с эффектным появлением нашего меню. Используем метод hover для добавления и удаления прозрачности фона меню при наведении и удалении курсора.

В заключении можно сказать, что нет предела совершенству и продолжать играться со стилями, и эффектами можно еще долго.

Реализовать эту задачу можно и на чистом javaScript, но jQuery имеет больший интерес 🙂

На фоне данного урока появилась еще одна мысль: сделать расширение основного контента при исчезновении из вида боковой колонки (как ВКонтакте).