Create an animation effect that runs only once, after a certain bearing height

Question

I’m trying to create an animation for a div after the scroll is higher than a value (in my case, 1100).

It works to some extent, but after it goes past 1100, every time you move the scroll this effect rotates again.

Here is my code:

<script type="text/javascript">
    var $j = jQuery.noConflict(); 
    $j(document).ready(function() {
        $j(window).bind('scroll', function(){
            if($j(this).scrollTop() > 1100)
                $j('.testing')
                    .css("position","fixed")
                    .css("top","10px")
                    .animate({marginTop: '30px'}, 500)
                    .animate({marginTop: '10px'}, 500);
            else
                $j('.testing')
                    .css("position","relative")
                    .css("top","0")
                    .animate({marginTop: '0px'}, 500);
        });
    });
</script>

.testing is my div and whenever the scroll passes 1100 it performs almost infinitely.

My intention is that when you get to 1100, it will run the animation and at the end of it, stay static with the position Fixed until the scroll is less than 1100.

Answer 1

You can create a "flag" variable that stores the state of the animation to know if the element has already been animated. You can also compare the footer position on the page to get back position: absolute in case he’s bumping into the footer.

Suggestion:

(Example: http://jsfiddle.net/px5Ls8q7/)

var $j = jQuery.noConflict();
$j(document).ready(function() {
    var animationCompleted = false;
    var posicaoFooter = $j('#footer').offset().top;
    var posicaoFinalContent = $j('#content').position().top + $j('#content').outerHeight(
        true);
    var sidebarDiv = $j('.testing');
    $j(window).bind('scroll', function() {
        var scroll = $j(this).scrollTop();
        if (scroll + sidebarDiv.height() >= posicaoFooter) {
            sidebarDiv.css({
                position: 'absolute',
                top: posicaoFinalContent - sidebarDiv.height()
            })
            return;
        } else if (animationCompleted) {
            sidebarDiv.css("position", "fixed").css('top', '0')
        }
        if (scroll > 1150 && !animationCompleted) {
            sidebarDiv.css("position", "fixed").css('top', '0')
                .animate({
                    marginTop: '-40px'
                }, 100, function() {
                    sidebarDiv.animate({
                        marginTop: '20px'
                    }, 125).animate({
                        marginTop: '0px'
                    }, 150).animate({
                        marginTop: '10px'
                    }, 175);
                })
            animationCompleted = true
        } else if (scroll < 1156 && animationCompleted) {
            animationCompleted = false;
            sidebarDiv.css("position", "relative").stop().animate({
                marginTop: '-30px'
            }, 150).animate({
                marginTop: '15px'
            }, 150).animate({
                marginTop: '-7px'
            }, 150).animate({
                marginTop: '3px'
            }, 150).animate({
                marginTop: '0px'
            }, 150);
        }
    });
});