Hacer aparecer/desaparecer un div cuando hago scroll

publicado por: Anonymous

¿Como puedo hacer con JS para que cuando haga scroll hacia abajo desaparezca el div=Ventana?

¿Y si hago scroll hacia arriba que aparezca?

_x000D_

_x000D_

#Ventana {_x000D_
  height: 100px;_x000D_
  width: 100%;_x000D_
  background-color: red;_x000D_
  text-align: center;_x000D_
  line-height: 100px;_x000D_
}_x000D_
_x000D_
#OtroContenedor {_x000D_
  height: 1500px;_x000D_
  width: 100%;_x000D_
  background-color: purple;_x000D_
}

_x000D_

<div id="Ventana">_x000D_
  Esto es mi ventana_x000D_
</div>_x000D_
_x000D_
<div id="OtroContenedor">_x000D_
  Este texto es de relleno_x000D_
</div>

_x000D_

_x000D_

_x000D_

solución

Evaluando hacia donde va el scroll y utilizando la propiedad CSS ‘display’:

var lastScrollTop = 0;
$(window).scroll(function(event){
   var st = $(this).scrollTop();
   if (st > lastScrollTop){
       // downscroll code
       document.getElementById("Ventana").style.display = "none"
   } else {
      // upscroll code
      document.getElementById("Ventana").style.display = "inline"
   }
   lastScrollTop = st;
});
Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *