В настоящее время практически на всех сайтах есть меню, прилипающее к верху экрана при прокрутке. Это значительно улучшает пользовательский опыт, поэтому необходимо уметь быстро и легко реализовывать эту логику используя CSS и Javascript.
Начнем с HTML разметки:
Сделаем так, чтобы прилипал элемент nav, который будет служить меню. Добавим стили:
/* Сбросим дефолтные отступы для демонстрации */
body{
margin: 0;
padding: 0;
}
.header{
background: #FFFACD;
width: 100%;
height: 100px;
}
.nav{
background: #87CEEB;
width: 100%;
height: 50px;
}
.main{
background: #AFEEEE;
width: 100%;
height: 150vh;
display: block;
}
/* Будем присваивать этот класс, чтобы блок прилипал */
.sticky{
position: fixed;
top: 0;
}
/* Добавляем отступ равный высоте меню к контенту */
.sticky + .main{
padding-top: 50px;
}
А теперь реализуем логику на Javascript:
window.onscroll = function() {
checkMarginToTop();
};
var nav = document.getElementById("nav");
var sticky = nav.offsetTop;
function checkMarginToTop() {
if (window.pageYOffset > sticky) {
nav.classList.add("sticky");
} else {
nav.classList.remove("sticky");
}
}
Теперь наш скрипт определяет расстояние от верха меню до верха окна и когда это расстояние становится равным 0 присваивает класс sticky элементу nav.
« список статей