Вот фиктивная страница, которую я сделал
#over-flow-menu {
width: 3.5rem;
height: 3.5rem;
display: block;
position: fixed;
background: white;
border-radius: 50%;
right: 2rem;
top: 2rem;
font-size: 8px;
display: flex;
align-items: center;
justify-content: center;
letter-spacing: 1px;
color: #666;
}
.grey, .white {
width: 100%;
height: 300px;
display: flex;
align-items: center;
justify-content: center;
font-size: 30px;
letter-spacing: 2px;
}
.grey {
background: #ddd;
color: white;
}
.white {
color: #666;
}
<div id="over-flow-menu">MENU</div>
<div class="grey">GRAY</div>
<div class="white">WHITE</div>
<div class="grey">GRAY</div>
<div class="white">WHITE</div>
<div class="grey">GRAY</div>
<div class="white">WHITE</div>
<div class="grey">GRAY</div>
<div class="white">WHITE</div>
Моя цель - изменить текущее меню , изменив цвет фона при прокрутке в секцию GREY .Цвет фона меню изменится на белый, и пока он будет прокручиваться до следующего раздела белого, фон снова станет белым и т. д.
Я пытался использовать какой-нибудь плагин, например srollMagic но интересно, есть ли лучшее, почему для достижения этой цели