0

Quero fazer um efeito simples, que seria aplicar um efeito de animate em uma div, aumentando a altura dela após rolagem da página e, quando a página rolasse para o topo novamente, essa div voltaria ao style inicial.

CSS

 <style>
  .geral-boxes{
      width: 100%;
      float: left;
  }
  .box1,.box2,.box3{
      width: 100%;
      float: left;
      height: 500px;
  }
  .box1{
      background-color: #fff;
  }
  .box2{
      background-color: #fff;
  }.box3{
      background-color: #fff;
  }
  .geral-boxes{
      width: 100%;
      float: left;
  }
  .laranja{
      width: 100%;
      float: left;
  }
  .scroll-aparecer{
      width: 50px;
      float: left;
      height: 0px;
      background-color: #000;
  }

SCRIPT

$(document).ready(function(){
  $(window).on('scroll', function() {
    if($(window).scrollTop() > 200) {
        $('.scroll-aparecer').animate({
            height:"100px"
        }, 1000); /*Defina aqui o tempo em milisegundos */
    }else{
        $('.scroll-aparecer').animate({
            height:"0"
        }, 1000); /*Defina aqui o tempo em milisegundos */
    }

  });
});

HTML

<div class="box1"></div>

<div class="box2"></div>

<div class="box3"></div>

<div class="scroll-aparecer"></div>

Qual a melhor forma de fazer isso?

2 Respostas 2

3

É preciso usar o método .stop() do jQuery para parar a animação quando o scroll atender a uma das condições, caso contrário vai dar conflito nas animações quando uma ainda não tiver sido terminada no tempo definido. É como se "jogasse" uma animação em cima da outra que ainda está sendo executada.

Basta adicionar $('.scroll-aparecer').stop(); no início do evento scroll, que irá parar animação do elemento com a classe .scroll-aparecer e iniciar ou continuar novamente de acordo com a condição if.

No exemplo abaixo coloquei a div fixa para que possa visualizar o efeito melhor:

$(document).ready(function(){
   $(window).on('scroll', function() {
      $('.scroll-aparecer').stop();
      if($(this).scrollTop() > 200) {
         $('.scroll-aparecer').animate({
            height:"100px"
         }, 1000); /*Defina aqui o tempo em milisegundos */
      }else{
         $('.scroll-aparecer').animate({
         height:"0"
         }, 1000); /*Defina aqui o tempo em milisegundos */
      }
   });
});
.geral-boxes{
   width: 100%;
   float: left;
}
.box1,.box2,.box3{
   width: 100%;
   float: left;
   height: 500px;
}
.box1{
   background-color: #fff;
}
.box2{
   background-color: #fff;
}.box3{
   background-color: #fff;
}
.geral-boxes{
   width: 100%;
   float: left;
}
.laranja{
   width: 100%;
   float: left;
}
.scroll-aparecer{
   width: 50px;
   float: left;
   height: 0;
   background-color: #000;
   
   position: fixed; top: 0; left: 0; z-index: 999;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box1">Role para baixo</div>

<div class="box2"></div>

<div class="box3"></div>

<div class="scroll-aparecer"></div>

3
  • Obrigado pela resposta. Existe uma forma de fazer esse scroll não pegar a distância do topo da página e sim se referir a algum elemento?
    – maiquel
    Commented 4/12/2017 às 10:38
  • @maiquel sim, basta pegar a distância do elemento que vc quer se referir até o topo + a altura dele. Veja se é isto: jsfiddle.net/pzeemo0f
    – Sam
    Commented 4/12/2017 às 11:04
  • @maiquel Se achou a resposta útil, não deixe de marcar ✔
    – Sam
    Commented 7/12/2017 às 6:19
1

Percebi alguns erros de sintaxe e nomenclatura no seu código, usando só o scroll eu não consegui obtive o resultado esperado, apenas utilizando um timeout para detectar o fim do scroll, então a animação está sendo executada depois que o scroll é finalizalidado. Também mudei alguns detalhes no css, mas só para facilitar a visualização. Veja se partindo desse ponto você consegue obter o resultado esperado. :)

var espera = 100;
var timeout = null;

$(window).bind('scroll',function(){
    clearTimeout(timeout);
    timeout = setTimeout(function(){

    if($(window).scrollTop() > 200)
    {
        $('.scroll-aparecer').animate({ height:"100px" });
    }
    else
    {
        $('.scroll-aparecer').animate({height:"0"});
    }    
    

    },espera);
});
.geral-boxes{
      width: 100%;
      float: left;
  }
  .box1,.box2,.box3{
      width: 100%;
      float: left;
      height: 500px;
  }
  .box1{
      background-color: #eee;
  }
  .box2{
      background-color: #bbb;
  }.box3{
      background-color: #ccc;
  }
  .geral-boxes{
      width: 100%;
      float: left;
  }
  .laranja{
      width: 100%;
      float: left;
  }

  .scroll-aparecer{
      width: 100%;
      float: left;
      height: 0px;
      background-color: #000;
      position: fixed;
      top: 0;
      display: block;
  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box1"></div>

<div class="box2"></div>

<div class="box3"></div>

<div class="scroll-aparecer"></div>

5
  • Alguns detalhes que eu mencionei sobre sintaxe e nomenclatura foram editados enquanto eu montava a resposta, desconsidere essas observações. Commented 1/12/2017 às 12:46
  • @maiquel Era isso que você queria? Commented 1/12/2017 às 19:51
  • Opa, ajudou. Porém eu não queria que a div que aparece ficasse fixa, queria que se posicionasse como outros elementos e rolasse junto com a página. É possível?
    – maiquel
    Commented 4/12/2017 às 10:39
  • Sim... como eu falei deixei fíxa só para ajudar na visualização do exemplo Commented 4/12/2017 às 11:27
  • Sim, como eu falei, deixei fixa para facilitar a visualização do exemplo Commented 4/12/2017 às 11:30

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 .