动画留下不在页面滚动上工作

Question

我有两个粉色和天蓝色的div，我把它们做成相同的高度和宽度。粉红色的div几乎覆盖了我的屏幕高度，当我向下滚动并且滚动条到达天蓝色时，我想要将蓝色div设置为右边的动画，当滚动条离开那个div时，我希望该div移回它来自的位置。 / p>

repoquery --tree-requires

JS FIDDLE

Answer 1

您可以应用此逻辑：

1. 使用transition为元素设置动画，因为这样的css如下：

   #blueDiv {
     width: 50%;
     height: 100px;
     background-color: blue;
     position: absolute;
     left:0;
     transition:left 2s linear;
   }
   #blueDiv.right {
     left:50%
   }
   

2. 使用Jquery检查元素天空距离顶部多远，并在滚动到达时触发事件：

   $(window).scroll(function() {
       var offT = $('#two').offset().top - $(window).height(),
           scrT = $(window).scrollTop();
       if(scrT >= offT) {
          $('#blueDiv').addClass('right')
       } else {
          $('#blueDiv').removeClass('right')
       }
   });
   

Jquery Demo