Javascript 设置左侧动画不在页面滚动上工作

我有两个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;
   }    

     });
  });   

});

$（文档）.ready（函数（）{
$（窗口）.scrollTop（函数（）{
$（this）.scroll（函数（）{
var scrollTopOrBottom=$（文档）.height（）-$（窗口）.height（）-$（窗口）.scrollTop（）；
如果（标志===0&&ScrollTopoBottom<1256）{
$（'#blueDiv'）。动画（{right:'200px'}，function（）{
flag=1；
});
}
如果（标志===1&&ScrollTopoBottom<740）{
console.log（ScrollTopoBottom）；
$（'#blueDiv'）。slideLeft（）；
flag=0；
}    
});
});   
});

---

您可以应用以下逻辑：

使用

transition

为元素设置动画，对于某些css，如下所示：

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

使用Jquery检查元素sky离顶部有多远，如果滚动达到以下值，则触发事件：

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

---

---

这几乎是我想要的，还有一件事，我想它不会后退，因为它前进了，它怎么能后退，我是说滑梯back@mohsinali它在元素不存在后返回visible@mohsinali我很高兴帮助你