Есть вот такая шапка:
<div class="header__top">
<div class="container">
<div class="header__top__wrap">
<nav class="nav">
<ul class="nav__list">
<li class="nav__item"><a class="nav__link" href="#!">Главная</a></li>
<li class="nav__item"><a class="nav__link" href="#!">Наши проекты</a></li>
<li class="nav__item"><a class="nav__link" href="#!">Услуги</a></li>
<li class="nav__item"><a class="nav__link" href="#!">Новости</a></li>
<li class="nav__item"><a class="nav__link" href="#!">Контакты</a></li>
</ul>
</nav>
<div class="burger__menu">
<span></span>
<span></span>
<span></span>
</div>
</div>
</div>
</div>
.header__top {
padding: 40px 0px;
border-bottom: 1px solid #A1A1A1;
}
.header__top__wrap {
display: flex;
align-items: center;
justify-content: flex-end;
}
.nav__list {
display: flex;
column-gap: 40px;
align-items: center;
justify-content: flex-end;
}
.nav__link {
font-weight: 500;
font-size: 16px;
line-height: 20px;
color: #fff;
padding-bottom: 39px;
}
.nav__link:hover {
border-bottom: 2px solid #FFFFFF;
}
Нужно сделать так чтобы при небольшом скроле вниз шапка фиксировалась, фон делался белым, а ссылки черным это я уже смогу сделать сам мне главное нужно сделать так чтоб шапка фиксировалась пробовал много разных скриптов но нечего не получаеться я добавлял клас .header__top__scrol
и задавал ему такие свойства:
.header__top__scrol {
position: fixed;
top: 0;
left: 0;
z-index: 9999;
width: 100%;
max-height: 100px;
background: #FFFFFF;
}
Вроде все правельно написно но я не уверен если что исправьте
Нужен скрип который будет решать эту задачу которю я описал выше желательно на ванильном js также буду очень признателен если кто-то укажет на мои ошибки в коде
Простой
