How to make element appear after scroll

Question

How to make element appear after scroll

Navigation

#1 by (1 votes)
#2 by (0 votes)

0

I want to do a simple effect, which would be to apply a animate effect to a div , increasing its height after scrolling the page, and when the page rolled to the top again, that div would return to style initial.

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 is the best way to do this?

html jquery css

asked by anonymous 01.12.2017 / 12:37

2 answers

how to ignore a line in dockerfile using dockerignore? How to list details of a specific product

score 1 · Answer 1

You need to use the jQuery method .stop() to stop the animation when scroll meets one of the conditions, otherwise it will conflict with the animations when one has not yet been finished at the set time. It's like you "play" one animation on top of the other still running.

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

In the example below, I put the div fixed so that you can see the effect better:

$(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><divclass="box1">Role para baixo</div>

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

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

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

score 0 · Answer 2

I noticed some syntax and nomenclature errors in your code, using only scroll I could not get the expected result, only 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 only to make it easier to see. See if starting 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><divclass="box1"></div>

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

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

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