动画左不工作的页面滚动

animate left not working on page scroll

本文关键字：滚动 工作 动画      更新时间：2023-09-26

我有两个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小提琴

你可以应用这个逻辑:

  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检查元素sky离顶部有多远，如果滚动到达该距离则触发事件:

    $(window).scroll(function() {
    var offT = $('#two').offset().top - $(window).height(),
        scrT = $(window).scrollTop();
    if(scrT >= offT) {
       $('#blueDiv').addClass('right')
    } else {
       $('#blueDiv').removeClass('right')
    }
});
<标题> Jquery演示
相关文章：