1

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

¿Y si hago scroll hacia arriba que aparezca?

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

#OtroContenedor {
  height: 1500px;
  width: 100%;
  background-color: purple;
}
<div id="Ventana">
  Esto es mi ventana
</div>

<div id="OtroContenedor">
  Este texto es de relleno
</div>

2 respuestas 2

1

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;
});
0

Debes tener el alto y posicion del div Ventana, luego detectar la posicion del scrollTop y comparar:

Solucion

<html>
<head>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	//var altoVentana = $('#Ventana').css('height').replace("px","");//usa este para que desaparezca despues de pasar el alto del div
	var altoVentana = 0;
	var posicionVentana = document.getElementById("Ventana").offsetTop;
	$(window).scroll(function(event){
		var posicionScroll = $(this).scrollTop();
	   	if (posicionScroll > (parseInt(posicionVentana)+parseInt(altoVentana))){
	    	$("#Ventana").css("display","none");
	   	} else {
	    	$("#Ventana").css("display","");
	   	}

	});
});
</script>
<style type="text/css">
#Ventana {height: 100px;width: 100%;background-color: red;text-align: center;line-height: 100px;}
#OtroContenedor {height: 1500px;width: 100%;background-color: purple;}
</style>
</head>
<body>

<div id="Ventana">Esto es mi ventana</div>
<div id="OtroContenedor">Este texto es de relleno</div>
</body>
</html>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.