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

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

4 января 2014 9:20 Категории: Программирование

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

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

Страница блога catine.ru до прокрутки

Страница блога catine.ru до прокрутки

Страница блога catine.ru после прокрутки

Страница блога catine.ru после прокрутки

Как же разрабатывался этот удивительный скрипт?

Для начала, необходимо узнать высоту скроллинга. Т.е. узнать высоту(в пикселях), после которой надо изменять/фиксировать меню сайта. Для этого понадобится 2 функции JQuery, следовательно надо подключить эту библиотеку. Это один из моих самых любимых плагинов, в нем есть абсолютно все. Нам будут нужны функции .scroll() и похожая функция .scrollTop().

Данный скрипт ловит функцией .scroll() на всем документе прокрутку/скроллинг, и при каждом скролле страницы он выводит в консоль браузера значение высоты скролла сверху(функция .scrollTop()).

Теперь необходимо открыть в браузере консоль, в Google Chrome это делается нажатием клавиши F12, и прокрутить страницу сайта ровно до того момента, где вы хотите фиксировать меню сайта. Далее смотрите последнюю запись в консоли браузера, это будет высота прокрутки, запомните это число.

По задаче, необходимо было сделать шапку меньше, а следовательно надо было изменить и логотип блога Catine, уменьшить его при скроллинге документа. Самым простым решением тут было применить css свойство background-size, но не все браузеры дружат с данным свойством, поэтому был использован другой подход:

Была изменена картинка логотипа сайта, был дополнен логотип. Теперь на логотипе сайта, если открыть картинку, можно увидеть большую и маленькую версию логотипа. Но на самом сайте отображается только одна из картинок, в зависимости от положения шапки. Т.е. я изменяю свойство background-position и тем самым уменьшается логотип сайта. А вот и основная часть скрипта для фиксации меню сайта сверху.

На этом фиксация шапки сайта с помощью скрипта JQuery заканчивается. Все вопросы и пожелания можете писать в комментариях.

С момента написания данной статьи прошло много времени и этот скрипт был оптимизирован. Об этом можно прочитать в статье Небольшая оптимизация блога,скрипт фиксации меню.

  • кенщ

    нк

  • Владислав

    Ребят, Вы так не шутите. Не забывайте домен проплачивать )))

    • Были проблемы с регистратором доменов по оплате, поэтому сайт лежал всего 2 дня.