0

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>
2
  • Hola Merkatech, y bienvenido. Para entender mejor el origen de su problema y poder solucionarlo es necesario que haga uso correcto de las etiquetas que le proporciona StackOverflow para distinguir su código de la descripción de su problema, adicionalmente puede crear una cuenta codepen.io/pen y subir su código ahí, donde será muy fácil encontrar su problema y resolverlo en la menor cantidad de tiempo posible. Éxitos. Commented el 4 sept. 2018 a las 19:59
  • Quita el atributo href del boton para cerrar. Commented el 5 sept. 2018 a las 14:05

1 respuesta 1

0

Podrías probar de manipular la altura de la #caja aunque no tengo la certeza que esto es lo que quieres. Por favor ejecuta el código (abajo).

$(function() {
  $(window).scroll(function() {
    var scroll = $(window).scrollTop();
    if (scroll >= 50) {
      $("#caja").addClass("entra");
    } else {
      $("#caja").removeClass("entra");
    }
  });
    });
#contenedor {
  height: 900px;
  background:#ddd;
}

#caja {
  width: 90%;
  height: 1px;
  position: fixed;
  top: 100px;
  right: 0;
  border: 1px  solid red;
  transform: translateX(100%);
  transition: all .5s ease;
  text-align:center;
 
}

#caja.entra {
  transform: translateX(0);
  height: 90%;
}

#caja .x {
    position: absolute;
    right: 13px;
    top: 9px;
    font-size: 14px;
    color: #f30303;
  
  border:1px solid red
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="contenedor">
  <div id="caja">
      <a href="#" class="x">X</a>
           <video width="80%" height="80%" autoplay controls>
             <source src="https://www.w3schools.com/Tags/movie.mp4"  type="video/mp4">
             Your browser does not support the video tag.
    </video>
</div>
</div>

2
  • 1
    Saludos, implemente tu solución pero no me responde como deseo, intentare mostrarte un enlace donde aparece lo que tengo y te comentare que deseo hacer:
    – Merkatech
    Commented el 11 sept. 2018 a las 14:23
  • aqui el sitio donde aparece todo el efecto completo integrado a una pagina... merkatechmexico.com.mx/control/login.html; como podras observar el div aparece con scroll, pero, al darle click a boton de cierre me desplaza de nuevo hacia ariba, evitandoq ue llegue a ver la mitad de la pagina la cual tiene un formulario que deseo llenen los usuarios despues de ver el video... eso no sucede porque solo me regresa al punto de partida donde se abre el div
    – Merkatech
    Commented el 11 sept. 2018 a las 14:37

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.