animieren nach rechts auf Bildlauf nach unten und animieren zurück nach links auf Bildlauf nach oben

Question

Ich versuche eine Animation auf der Seite Bildlauf, wo ausgewählte Element wird von links nach rechts auf Bildlauf nach unten und wenn nach oben zu animieren und dann das ausgewählte zu animieren Element von rechts (Standardposition) nach links, hier ist, was ich versuchte

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

wie Sie sehen können, auf nach unten scrollen, um das Testfeld bewegt, wie ich anweisen, aber wenn Scroll-up, es tut nicht nach links gehen als Standard, irgendwelche Ideen, bitte helfen?

Answer 1

Sie können eine globale Variable hinzufügen, um die Animation zu steuern. Siehe das Arbeits unten Snippet bitte, wo ich Teile des Codes kommentiert habe, dass ich hinzugefügt:

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

Dies sollte funktionieren, es verwendet auch CSS für die Animation.

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