我有两个粉红色和天蓝色的 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;
}
});
});
});
最佳答案
您可以应用此逻辑:
使用
transition
为元素添加动画效果,例如这样的一些 css:#blueDiv { width: 50%; height: 100px; background-color: blue; position: absolute; left:0; transition:left 2s linear; } #blueDiv.right { left:50% }
使用 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
关于javascript - 动画左不能在页面滚动上工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39642726/