Question

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

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

我想要的是div不采用数据滚动速度控制的滚动速度，直到另一个div（id =“myDiv2”）底部egde位于浏览器窗口的下边缘之上。否则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>

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

1 个答案: