javascript - 是否可以再次添加和删除数据滚动速度标签？

Question

当另一个 div(例如 myDiv2)的底部边缘滚动到浏览器窗口底部边缘上方时，是否可以将标签 data-scroll-speed="3"(myDiv1) 添加到 div？当 myDiv2 的底部边缘再次滚动到浏览器底部边缘以下时，再次删除 data-scroll-speed="3" 标签。这可能吗？

#myDiv1 {
  font-size: 5em;
  margin-top: 70vh;
  display: inline-block;
}

#myDiv2 {
  height: 120vh;
  width: 100vw;
  background-color: orange;
  z-index: -1;
  display: inline-block;
}

#myDiv3 {
  height: 500px;
  width: 100vw;
  background-color: grey;
}

<div id="myDiv2">
  <div id="myDiv1">
    hello, i am myDiv1
  </div>
</div>
<div id="myDiv3">
</div>

Answer 1

希望这对您有所帮助。为此，我使用了 JQuery。

Note that, I have only added the data-scroll-speedattribute. The rest is yours :)

$(window).scroll(function() {
  if ($(window).scrollTop() > $('#myDiv2').height() - $(window).height()) {
    $("#myDiv1").attr("data-scroll-speed", "3");
  } else {
    $("#myDiv1").removeAttr("data-scroll-speed");
  }
  console.log($("#myDiv2").html());
});

#myDiv1 {
  font-size: 5em;
  margin-top: 70vh;
  display: inline-block;
}

#myDiv2 {
  height: 120vh;
  width: 100vw;
  background-color: orange;
  z-index: -1;
  display: inline-block;
}

#myDiv3 {
  height: 500px;
  width: 100vw;
  background-color: grey;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="myDiv2">
  <div id="myDiv1">
    hello, i am myDiv1
  </div>
</div>
<div id="myDiv3">
</div>