Как зафиксировать меню при прокрутке за 2 шага

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

Пару слов о скрипте. Скрипт работает по такому сценарию:

  • Находит ul меню заданного класса
  • Задает ему ширину меню
  • Оборачивает его в div
  • Задает этому блоку высоту меню
  • При прокрутке страницы добавляет position:fixed;top:0;

Оборачивание меню в блок исключает скачек при фиксации меню . Получается контейнер приобретает высоту меню и играет роль «отпечатка».

Схематически это выглядит вот так

1

Установка

Скрипт требует подключения jQuery

Шаг 1. Скачайте и подключите внешние скрипты 

Шаг 2. Добавьте класс .menutofix к Вашему меню

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

<ul ....

Если он выглядит примерно вот так

<ul class="text" ....

(у Вас будет вместо text, что то другое)

то class=» замените на class=»menutofix

class="text

на

class="menutofix

не забудьте поставить пробел после menutofix

Вот собственно и все.

Понравилась статья? Ставь лайк.

Похожие материалы

Обсуждения

Оставьте свой Email И мы обсудим Вашу идею
*P.S.:Не работаю с бюджетами менее чем 600$