- Создаем шапку в Zero block. Цвет фона удаляем полностью.
- Нужный цвет можно изменить в коде (есть комментарии).
- В код добавляем id zero блока в трех местах (есть комментарии).
- Добавляем блок Т123 и вставляем код:
<!--Меняем цвет шапки по скроллу-->
<style>
.fixtop {
width: 100%;
position: fixed;
top: 0px;
z-index: 9999;
overflow: hidden;
transition: 0.2s ease-out;
background-color: #f5f5f5; /*Цвет фона меню начальный*/
}
.menuscroll{
background-color: #303030; /*Цвет фона меню при скролле*/
transition: 0.2s ease-out;
}
</style>
<script>
/*Вставляем ID Zero блока*/
document.querySelector('#rec742318942').classList.add('fixtop')
window.addEventListener('scroll', () => {
let scrollDistance = window.scrollY;
console.log(scrollDistance);
/*через сколько пикселей будет происходить смена цаета*/
if (scrollDistance <= 30) {
/*Вставляем ID Zero блока*/
document.querySelector('#rec742318942').classList.remove('menuscroll');
}else{
/*Вставляем ID Zero блока*/
document.querySelector('#rec742318942').classList.add('menuscroll');
}})
</script>
