动画左无法在页面滚动中使用 [英] animate left not working on page scroll

问题描述

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

I have two div's in pink and sky blue color, I make them the same height and width. Pink div is almost covering the height of my screen, when I scroll down and scrollbar reaches the sky blue then I want to animate blue div to right and when that scrollbar leave that div I want that div to move back where it comes from.

$(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

推荐答案

您可以应用以下逻辑:

1. 使用transition为元素设置动画，因为有些CSS像这样:

1. Use transition to animate the element, for that some css like this:

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

使用Jquery检查元素的天空距离顶部有多远，并在滚动达到以下条件时触发事件:

With Jquery check how far is the element sky from the top and trigger the event if the scroll reach that:

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

这篇关于动画左无法在页面滚动中使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！