How to make element appear after scroll

Question

I want to make a simple effect, which would be to apply an effect of animate in a div, increasing her height after scrolling the page and, when the page scrolled to the top again, that div back to the initial style.

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>

What’s the best way to do that?

Answer 1

You have to use the method .stop() jQuery to stop animation when the scroll meet one of the conditions, otherwise it will give conflict in the animations when one has not yet been completed at the set time. It’s like "playing" one animation on top of another that’s still running.

Just add $('.scroll-aparecer').stop(); at the beginning of the event scroll, that will stop animation of the element with the class .scroll-aparecer and start or continue again according to the condition if.

In the example below I put the div fixed so you can visualize the better effect:

$(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>

Answer 2

I noticed some syntax and nomenclature errors in your code, using only the scroll I could not get the expected result, just using a timeout to detect the end of the scroll, so the animation is running after the scroll is finished. I also changed some details in css, but just to make it easier to view. See if from this point you can get the expected result. :)

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>