Набор инструментов для создания landing page Часть 1
Landing page плотно ворвались в нашу жизнь. landing или посадочная страница широко используются для рекламы каких то товаров или услуг. Данный маркетинговый инструмент увеличивает конверсию сайта. И сегодня мы начинаем цикл статей для создания ландинга. И первый инструмент который нам мы замечаем при просмотре лендинга это Закрепленное верхнее меню. Пускай не у каждой страницы есть он, но как говорится в жизни пригодится.
Закрепленное меню
Начнем с того что надо сделать данное меню не будем сильно углубляться в html поэтому пускай будет черная полоска
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Закрепленное меню</title>
</head>
<body>
<div class="menu">
</div>
</body>
</html>
body{
margin: 0;
padding: 0;
}
.menu{
background-color: black;
width: 100%;
height: 50px;
} В результате у нас получится черная полоса высотой 50 пикселов и длинной 100%. После это добавляем к классы menu следующую строчки:
position:fixed;
z-index: 999;
Это закрепит меню сверху страницы и не зависимо будете вы пролистать или нет она будет сверху, а z-index сделает чтобы по оси Z она была выше остальных. И последнее сделаем так чтобы после первого разворота вашей страницы появлялось и закреплялось меню. Делается это следующим образом: Переделаем наш CSS стиль чтобы получилось так:
body{
margin: 0;
padding: 0;
}
.menu{
background-color: black;
width: 100%;
height: 50px;
z-index:999;
}
.floating{
position:fixed;
} И добавляем JavaScript:
// Floating menu
$(document).ready(function(){
$(function(){
$(window).scroll(function(){
if ($(this).scrollTop() > 450){
$(".menu").addClass("floating");
} else {
$(".menu").removeClass("floating");
}
})
})
}); Работает он следующиим образом при скролинге страницы ниже и при опускании страницы на 450 пикселей к классу меню еще добавляется класс floating в котором и прописаны у нас параметры. И закрепляется меню сверху.
