Estou tentando criar uma animação para uma div depois que o scroll seja maior de um valor (no meu caso, 1100).
Ele funciona até certo ponto, mas depois que passa de 1100, toda vez que se mexe no scroll este efeito roda novamente.
Eis o meu código:
<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 é a minha div e sempre que o scroll passa de 1100 ele executa quase que infinitamente.
A minha intenção é que, quando chegar na altura 1100, ele execute a animação e no fim dela, fique estático com o position fixed até que o scroll seja menor que 1100.