javascript - 仅从特定时刻开始数据滚动速度

我正在使用data-scroll-speed=控制某个div的滚动速度。
数据滚动速度作为标签输入：

<div id="myDiv1" data-scroll-speed="3">this is a test</div>.

我想要的是div不采用由data-scroll-speed控制的滚动速度，直到另一个div（id =“ myDiv2”）底部egde在浏览器窗口的底部边缘上方。否则，myDiv1必须以正常速度滚动。如何做到这一点？

最佳答案

$(function() {
  var $myDiv1 = $('#myDiv1');
  var $myDiv2 = $('#myDiv2');

  var bottom = $myDiv2.position().top + $myDiv2.outerHeight(true);

  $(window).on('scroll', function() {
    if ($(this).scrollTop() >= bottom) {
      console.log('Scroll Speed Set!');
    }
  });
});

*,
*:before,
*:after {
  box-sizing: border-box;
}

body {
  height: 800px;
  border: 1px solid black;
  padding: 20px;
}

div {
  padding: 25px;
  border: 1px solid black;
  height: 100px;
  width: 100px;
}

#myDiv2 {
  margin-top: 50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="myDiv1" data-scroll-speed="3">this is a test</div>
<div id="myDiv2">myDiv2</div>