Question

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

希望这会有所帮助。我已经使用了JQuery。

请注意，我只添加了data-scroll-speed属性。其余的是你的:)）

＆＃13;

$(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());
});

＆＃13;

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

＆＃13;

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

＆＃13;

可以再次添加和删除数据滚动速度标记吗？

1 个答案: