向上滚动向右动画，向上滚动动画回到左侧

Question

我试图在页面滚动上做动画，其中所选元素将在向下滚动时从左到右动画，如果返回到顶部，则从右到左动画所选元素（默认位置），此处为＆＃39我尝试了什么

＆＃13;

＆＃13;

$(document).ready(function() {
  $(window).scroll(function() {
    var wS = $(this).scrollTop();

    if (wS <= 10) {

      $("#test-box").animate({
        'left': 100
      }, 500);

    }
    if (wS > 11) {

      $("#test-box").animate({
        'left': $('#main-container').width() - 100
      }, 500);


    }

  });

});

＆＃13;

#main-container {
  width: 100%;
  overflow: auto;
  height: 500px;
}

#test-box {
  background: red;
  color: #ffffff;
  padding: 15px;
  font-size: 18px;
  position: fixed;
  left: 100;
  top: 10;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main-container">
  <div id="test-box">test</div>
</div>

＆＃13;

＆＃13;

＆＃13;

正如您所看到的，在向下滚动时，测试框会按照我的指示移动，但向上滚动时，默认情况下不会向左移动，任何想法，请帮助吗？

Answer 1

这应该有效，它也使用css作为动画。

＆＃13;

＆＃13;

$(document).ready(function() {
  var box = document.querySelector('#test-box');
  var stateClass = '-right';
  window.addEventListener('scroll', function(event) {
    box.classList.toggle(stateClass, document.body.scrollTop > 10);
  });
});

＆＃13;

#main-container {
  width: 100%;
  overflow: auto;
  height: 2000px;
}

#test-box {
  background: red;
  color: #ffffff;
  padding: 15px;
  font-size: 18px;
  position: fixed;
  left: 100px;
  top: 10;
  transition: .5s linear;
}

#test-box.-right {
  left: 100%;
  transform: translateX(-100%) translateX(-100px)
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main-container">
  <div id="test-box">test</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以添加全局变量来控制动画。请参阅下面的工作代码段，我在其中评论了我添加的部分代码：

$(document).ready(function() {
  var animated = false; //added variable to control the animation
  $(window).scroll(function() {
    var wS = $(this).scrollTop();
    if (animated && wS <= 10) {
      $("#test-box").animate({
        'left': 100
      }, 500);
      animated = false; //animation ended
    }
    if (!animated && wS > 11) {
      $("#test-box").animate({
        'left': $('#main-container').width() - 100
      }, 500);
      animated = true; //it was animated
    }
  });
});

#main-container {
  width: 100%;
  overflow: auto;
  height: 500px;
}

#test-box {
  background: red;
  color: #ffffff;
  padding: 15px;
  font-size: 18px;
  position: fixed;
  left: 100px;
  top: 10;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main-container">
  <div id="test-box">test</div>
</div>