div 触发流项目动画答案

【问题标题】：flow item animation trigger by divdiv 触发流项目动画
【发布时间】：2019-02-25 12:47:17
【问题描述】：

这是我制作的虚拟页面

#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 这样的插件但想知道是否有更好的理由来实现这个目标

【问题讨论】：

标签： javascript animation scroll scrollview

【解决方案1】：

请将以下代码添加到您的 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>

【讨论】：

【解决方案2】：

使用 Javascript 你可以实现如下脚本

var divHight = document.getElementsByClassName('grey')[0].offsetHeight;
window.onscroll = function (e) {
    var scrollAt = Math.floor(window.scrollY/divHight);
    document.getElementById("over-flow-menu").style.background = (scrollAt%2 == 1? "#ddd": "white") ;
}

#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>

【讨论】：