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

Question

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

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

我想要的是 div 不采用由 data-scroll-speed 控制的滚动速度，直到另一个 div 的 (id= "myDiv2") 底部边缘高于浏览器窗口的底部边缘。否则 myDiv1 必须以正常速度滚动。如何实现？

Answer 1

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