How can I do with JS so that when I scroll down the div = Window disappears?
What if I scroll up to show up?
#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>Assessing where the scroll is going and using the CSS property '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;
});
You must have the height and position of div Ventana , then detect the position of scrollTop and compare:
Solution
<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>