时间戳

首页 > 解决方案 > 向右移动并在滚动时返回

javascript - 向右移动并在滚动时返回

问题描述

我想在 $(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;
    });

标签： javascriptjquery

解决方案

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

[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

要消除“故障”，仅在必要时启动动画；

推荐阅读