how to close an open div window with scrool without returning to the top scroll?

Question

how to close an open div window with scrool without returning to the top scroll?

Navigation

#1 by (0 votes)

0

An initial apology, I am an apprentice and I have made an effect that I want to implement on my website, I have created a DIV that is opened by sliding the scroll down, the DIV presents a video, which I wish can be manually closed to the end of happening (has hitchhiking), the only thing that occurred to me to close it was to place an X button that sends me to the beginning of the scroll and that "closes" but actually only returns me to the original position of the dIV, and The content below the video is never seen; I want to close the DIV without returning to its original position, I guess with the HIDE function but, being an apprentice I totally ignore how it is done, I give an example and code of what I have done so far (use jquery, css and 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>

jquery html5 div scroll

asked by Merkatech 04.09.2018 в 21:50

source

1 answer

Operations with decimals, Angular 6, esLocale VB.NET Problems opening a folder

score 0 · Answer 1

You could try manipulating the height of #caja although I'm not sure that this is what you want. Please execute the code (below).

$(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>