запуск анимации элемента потока с помощью div - PullRequest
0 голосов
/ 25 февраля 2019

Вот фиктивная страница, которую я сделал

#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 но интересно, есть ли лучшее, почему для достижения этой цели

1 Ответ

0 голосов
/ 25 февраля 2019

Пожалуйста, добавьте следующий код в ваш HTML.Возможно, это не лучшее решение, но оно работает.

<script>

window.onscroll = function (e) {
var x = window.scrollY;
var y = x/300;
var z = Math.floor(y);
var t = z%2;
    if(t == 1  ){
     document.getElementById("over-flow-menu").style.background = "#ddd";
    }
    else{
        document.getElementById("over-flow-menu").style.background = "white";
    }
}
</script>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...