左侧动画在页面滚动上不起作用

Question

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

$(document).ready(function(){

$(window).scrollTop(function(){

$(this).scroll(function(){

var scrollTopOrBottom = $(document).height() - $(window).height() - $(window).scrollTop();

  if(flag === 0 && scrollTopOrBottom < 1256){
    $('#blueDiv').animate({right: '200px'}, function(){
        flag = 1;
    });
 }

if(flag === 1 && scrollTopOrBottom < 740){
    console.log(scrollTopOrBottom);
 $('#blueDiv').slideLeft();
    flag = 0;
   }    

     });
  });   

});

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