Una disculpa inicial, soy aprendiz y he hecho un efecto que deseo implementar en mi sitio web, he creado un DIV que se abrfe al deslizar el scroll hacia abajo, presenta el DIV un video, el cual deseo se pueda cerrar manualmente al terminar de pasar (tiene autostop), lo unico que se me ocurrio para cerrarlo fue colocar un boton X que me envia hacia el incio del scroll y eso lo "cierra" aunque en realidad solo me regresa a la posicion original del dIV, y por ende el contenido debajo del video nunca se ve; Quiero Cerrar el DIV sin que se regrese a su posicion original, supongo que con la funcion HIDE pero, al ser aprendiz ignoro totalmente como se hace, dejo ejemplo y codigo de lo que he hecho hasta ahora (use jquery, css y html):
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento sin título</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>document.cookie = "popup_scroll=caja;";</script>
<script>$(function() {
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 50) {
$("#caja").addClass("entra");
} else {
$("#caja").removeClass("entra");
}
});
});</script>
<style type="text/css">
#contenedor {
height: 900px;
}
#caja {
width: 90%;
height: 90%;
position: fixed;
top: 100px;
right: 0;
border: solid 0px red;
transform: translateX(100%);
transition: all .5s ease;
}
#caja.entra {
transform: translateX(0);
}
#caja .x {
position: absolute;
right: 13px;
top: 9px;
font-size: 14px;
color: #f30303;
</style>
</head>
<body>
<div id="contenedor">
<div id="caja"><center>
<a href="#" class="x">X</a>
<video src="video.webm" width="80%" height="80%" autoplay controls></video>
</center></div>
</div>
</body>
</html>