Липкое меню с прозрачностью до начала скрола страницы

Последнее обновление Сен 22, 2021

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

Естественно что данный скрипт и стили предоставлены в качестве костяка на котором можно строить свои решения.

CSS


/* Прозрачность меню */
header#masthead {
    position: absolute;
    margin-top: 0px;
    z-index: 15;
    width: 100vw;
}

nav#site-navigation {
    background-color: #00296500;
    color: white;
}

nav#site-navigation {
    box-shadow: none !important;
}

nav {
    border-bottom: none !important;
}
/*END*/

Источник записи: https://mediadoma.com