0

Quando realizo o scroll, a função executa normalmente, mas fica repetindo toda vez que continuo com o scroll do mouse. Gostaria de saber como fazê-la executar somente uma vez.

Estou fazendo assim:

$(window).scroll(function () {  
    var scrollTop = $(document).scrollTop();
    if (scrollTop >= 100) {     
        $("#box").animate(
           { margin:'50px 0 0 0' },
            600
        ); // end animate
    }
});
5
  • 1
    Tente trocar $(window).scroll(function () { por $(window).on('scroll',function () { Commented 15/03/2018 às 20:57
  • Assim a função executa e volta ao seu estado inicial. Por exemplo, faz o marginTop 50px e retorna ao 0. Preciso que ela vá até o 50px e fique no 50.
    – Neo
    Commented 15/03/2018 às 21:01
  • Na verdade era on e não one. Commented 15/03/2018 às 21:02
  • mesmo com 'on', não resolveu
    – Neo
    Commented 15/03/2018 às 21:04
  • Poste seu código completo no jsfilder para ficar mais fácil de vermos o que está acontecendo. Commented 15/03/2018 às 21:05

1 Resposta 1

0

Crie um flag qualquer e altere seu valor quando entrar no if. Assim, só entrará uma vez:

var flag = true;
$(window).scroll(function () {  

   var scrollTop = $(document).scrollTop();        


   if (scrollTop >= 100 && flag) {    

      flag = false;         

      $("#box").animate({
         margin:'50px 0 0 0'
      },600);//end animate        
   }

});//

Exemplo:

var flag = true;
$(window).scroll(function () {  

   var scrollTop = $(document).scrollTop();        


   if (scrollTop >= 100 && flag) {    
      console.log("Só vai executar 1 vez");
      flag = false;         

      $("#box").animate({
         margin:'50px 0 0 0'
      },600);//end animate        
   }

});//
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="box" style="position: fixed;">
   div
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

3
  • Aconteceu da mesma forma, a função executa e volta ao seu estado inicial. Por exemplo, faz o marginTop 50px e retorna ao 0. Preciso que ela vá até o 50px e fique no 50
    – Neo
    Commented 15/03/2018 às 21:03
  • Creio que não, execute o exemplo que coloquei na resposta agora.
    – Sam
    Commented 15/03/2018 às 21:05
  • feito, resolvido
    – Neo
    Commented 16/03/2018 às 12:01

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .