Question

我想在$（window）.scrollTop> 200上右移表格元素，并在$（window）.scrollTop <200但要返回时将其返回。

//On scroll 
    var scrollTop;
    var scroll_down = false;
    var prevScroll = 0;
    $(window).scroll(function() {
        scrollTop = $(window).scrollTop();
        if (scrollTop > prevScroll) {
            scroll_down = true;
        } else {
            scroll_down = false;
        }           
        if (scroll_down & scrollTop > 100) {
            $('.home table').animate({'right': '-100%'}, 500);
        } else if (!scroll_down & scrollTop < 100) {
            $('.home table').animate({'right': '10%'}, 500);        
        }
        prevScroll = scrollTop;
    });

Answer 1

^[1] 您需要在.animate(之前使用.stop()来停止匹配元素上当前正在运行的动画。

^[2] 在您的情况下，您无需检查向下/向上滚动，而只希望为特定的scrollTop() 100或200触发动画

//On scroll 
let prev = 0;
$(window).scroll(function() {
  var Right = $(window).scrollTop() > 100 ? "-100%" : "10%"; // get the `right` value 
  if(prev !== Right){
    $('.home table').stop().animate({'right': prev = Right}, 500); // animate
  }
});

.home{height : 2000px;}
.home table{position : fixed;top : 0;width : 100%;background : red;height : 20px;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="home">
  <table></table>
</div>

^{也如下面评论中的@Leonard所建议的，您可以在prev条件下使用if变量}

要消除“模糊不清”，仅在必要时启动动画；

向右移动并滚动返回

1 个答案: