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?