javascript - 向后滚动时 Jquery 不工作

Question

所以我有我的代码设置，使一个框在向下滚动时淡出(这是有效的)，但是当我告诉它在向上滚动时淡入时，它不起作用。

$(window).scroll(function() {
    if ($(this).scrollTop() > 200) { //use `this`, not `document`
        $(".box").animate({'opacity':'1'}, 1000);
    }
});
$(window).scroll(function() {
    if ($(this).scrollTop() < 200) { //use `this`, not `document`
        $(".box").animate({'opacity':'0'}, 1000);
    }
});

提前感谢您的回复

Answer 1

在开始新的动画功能之前，您必须停止动画，使用 .stop()

请参阅下面的工作 fiddle :(向下滚动查看效果)

$(window).scroll(function() {

    console.log($(this).scrollTop());
    if ($(this).scrollTop() > 200) { //use `this`, not `document`
        $(".box").stop().animate({'opacity':'1'}, 1000);
    }
    
    if ($(this).scrollTop() < 200) { //use `this`, not `document`
        $(".box").stop().animate({'opacity':'0'}, 1000);
    }
});

.box {
  width:100px;
  height:100px;
  background-color:red;
  position:fixed;
  right:10px;
  top:10px;
  opacity:0;
}

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

<p>some paragraph</p>
<p>some paragraph</p><p>some paragraph</p><p>some paragraph</p><p>some paragraph</p><p>some paragraph</p><p>some paragraph</p><p>some paragraph</p><p>some paragraph</p><p>some paragraph</p><p>some paragraph</p><p>some paragraph</p><p>some paragraph</p><p>some paragraph</p><p>some paragraph</p><p>some paragraph</p><p>some paragraph</p><p>some paragraph</p><p>some paragraph</p><p>some paragraph</p><p>some paragraph</p><p>some paragraph</p><p>some paragraph</p><p>some paragraph</p><p>some paragraph</p><p>some paragraph</p><p>some paragraph</p><p>some paragraph</p><p>some paragraph</p><p>some paragraph</p><p>some paragraph</p><p>some paragraph</p><p>some paragraph</p><p>some paragraph</p><p>some paragraph</p><p>some paragraph</p>