动画向右滚动向下滚动并向左滚动动画

Question

我正在尝试在页面滚动上执行动画，其中选定元素将从左向右进行动画向下滚动，如果返回顶部，则为所选内容设置动画从右至左（默认位置）元素，这里就是我试图

$(document).ready(function() { 
 
    $(window).scroll(function() { 
 
    var wS = $(this).scrollTop(); 
 

 
    if (wS <= 10) { 
 

 
     $("#test-box").animate({ 
 
     'left': 100 
 
     }, 500); 
 

 
    } 
 
    if (wS > 11) { 
 

 
     $("#test-box").animate({ 
 
     'left': $('#main-container').width() - 100 
 
     }, 500); 
 

 

 
    } 
 

 
    }); 
 

 
});

#main-container { 
 
    width: 100%; 
 
    overflow: auto; 
 
    height: 500px; 
 
} 
 

 
#test-box { 
 
    background: red; 
 
    color: #ffffff; 
 
    padding: 15px; 
 
    font-size: 18px; 
 
    position: fixed; 
 
    left: 100; 
 
    top: 10; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="main-container"> 
 
    <div id="test-box">test</div> 
 
</div>

正如你所看到的，在向下滚动，测试框移动作为我指示，但是当向上滚动，它不作为默认去左边，任何想法，请帮助吗？

Answer 1

您可以添加一个全局变量来控制动画。请参见下面的代码片段工作请，在那里我已经评论说，我加入了部分代码：

$(document).ready(function() { 
 
    var animated = false; //added variable to control the animation 
 
    $(window).scroll(function() { 
 
    var wS = $(this).scrollTop(); 
 
    if (animated && wS <= 10) { 
 
     $("#test-box").animate({ 
 
     'left': 100 
 
     }, 500); 
 
     animated = false; //animation ended 
 
    } 
 
    if (!animated && wS > 11) { 
 
     $("#test-box").animate({ 
 
     'left': $('#main-container').width() - 100 
 
     }, 500); 
 
     animated = true; //it was animated 
 
    } 
 
    }); 
 
});

#main-container { 
 
    width: 100%; 
 
    overflow: auto; 
 
    height: 500px; 
 
} 
 

 
#test-box { 
 
    background: red; 
 
    color: #ffffff; 
 
    padding: 15px; 
 
    font-size: 18px; 
 
    position: fixed; 
 
    left: 100px; 
 
    top: 10; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="main-container"> 
 
    <div id="test-box">test</div> 
 
</div>

Answer 2

这应该工作，它也使用CSS的动画。

$(document).ready(function() { 
 
    var box = document.querySelector('#test-box'); 
 
    var stateClass = '-right'; 
 
    window.addEventListener('scroll', function(event) { 
 
    box.classList.toggle(stateClass, document.body.scrollTop > 10); 
 
    }); 
 
});

#main-container { 
 
    width: 100%; 
 
    overflow: auto; 
 
    height: 2000px; 
 
} 
 

 
#test-box { 
 
    background: red; 
 
    color: #ffffff; 
 
    padding: 15px; 
 
    font-size: 18px; 
 
    position: fixed; 
 
    left: 100px; 
 
    top: 10; 
 
    transition: .5s linear; 
 
} 
 

 
#test-box.-right { 
 
    left: 100%; 
 
    transform: translateX(-100%) translateX(-100px) 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="main-container"> 
 
    <div id="test-box">test</div> 
 
</div>