Landing page плотно ворвались в нашу жизнь. landing или посадочная страница широко используются для рекламы каких то товаров или услуг. Данный маркетинговый инструмент увеличивает конверсию сайта. И сегодня мы начинаем цикл статей для создания ландинга. И первый инструмент который нам мы замечаем при просмотре лендинга это Закрепленное верхнее меню. Пускай не у каждой страницы есть он, но как говорится в жизни пригодится.

Закрепленное меню

Начнем с того что надо сделать данное меню не будем сильно углубляться в html поэтому пускай будет черная полоска

 

В результате у нас получится черная полоса высотой 50 пикселов и длинной 100%.

После  это добавляем  к классы menu следующую строчки:

Это закрепит меню сверху страницы и не зависимо будете вы пролистать или нет она будет сверху, а z-index сделает чтобы по оси Z она была выше остальных.

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

Переделаем наш CSS стиль чтобы получилось так:

И добавляем JavaScript:

Работает он следующиим образом при скролинге страницы ниже и при опускании страницы на 450 пикселей к классу меню еще добавляется класс floating в котором и прописаны у нас параметры. И закрепляется меню сверху.