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

Question

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

Navigation

#1 by (1 votes)

2

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

It works to a certain extent, but after it reaches 1100, every time it moves on the scroll, this effect runs again.

Here's 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 runs almost infinitely.

My intention is that when it reaches 1100, it runs the animation and at the end of it, stay static with the position fixed until the scroll is less than 1100.

jquery rolamento

asked by anonymous 12.12.2014 / 13:53

1 answer

Record in the database the office hours and make an appointment Problems with reading and writing

score 1 · Accepted Answer

You can create a variable "flag" that stores the state of the animation to know that the element has already been animated. You can also compare the position of the footer on the page to have position: absolute if it is colliding with the footer.

Suggestion:

( Example: link )

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);
        }
    });
});