1

Abrir el código en pantalla completa!!!

Quiero conseguir que "EL DIV FLOTANTE" empiece a flotar solamente cuando el lado superior de la pantalla lo toque, antes de ese momento quiero que mi "DIV FLOTANTE" permanezca en su sitio debajo de header.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<style>
body {
  background-color: #ccc;
  color: #444;
}
.header {
  border: 2px solid #000;
  width: 100%;
}

.left {
  margin-top: 20px;
  width: 60%;
  float: left;
  border: 2px solid #000;
}

.floating {
  margin-top: 20px;
  width: 100px;
  position: fixed;
  float: right;
  right: 0px;
  border: solid 2px red;
}
</style>
<div class="header">
  <h1>Header</h1>
  <h1>Texto de header</h1>
  <h1>Texto de header</h1>
</div>
<div class="left">
  <h1>Ve scrolando hacia abajo</h1>
  <h1>Ve scrolando hacia abajo</h1>
  <h1>Ve scrolando hacia abajo</h1>
  <h1>Ve scrolando hacia abajo</h1>
  <h1>Ve scrolando hacia abajo</h1>
  <h1>Ve scrolando hacia abajo</h1>
  <h1>Ve scrolando hacia abajo</h1>
  <h1>Ve scrolando hacia abajo</h1>
<h1>Ve scrolando hacia abajo</h1>
  <h1>Ve scrolando hacia abajo</h1>
  <h1>Ve scrolando hacia abajo</h1>
  <h1>Ve scrolando hacia abajo</h1>
  <h1>Ve scrolando hacia abajo</h1>
  <h1>Ve scrolando hacia abajo</h1>
  <h1>Ve scrolando hacia abajo</h1>
<h1>Ve scrolando hacia abajo</h1>
  <h1>Ve scrolando hacia abajo</h1>
  <h1>Ve scrolando hacia abajo</h1>
  <h1>Ve scrolando hacia abajo</h1>
  <h1>Ve scrolando hacia abajo</h1>
  <h1>Ve scrolando hacia abajo</h1>
  <h1>Ve scrolando hacia abajo</h1>
  <hr>
  <h1>Ahora mira el espacio que esta entre el div y la parte superior de la pagina. Quiero que ese espacio desaparezca!</h1>
  <hr>

</div>
<div class="floating">
  EL DIV FLOTANTE
</div>

Quiero que el espacio entre el div flotante y la parte de arriba del navegador sea 0px.

introducir la descripción de la imagen aquí

3
  • No entiendo bien tu pregunta ni lo que quieres hacer, puedes ser más claro o subir imágenes de referencia de lo que quieres lograr? Commented el 29 sept. 2017 a las 17:08
  • @CamiloVasquez He corregido un poco mi ejemplo, ahora se ve mejor. Quiero que el div flotante toque la parte de arriba del navegador. Gracias por tu peticion para especificar.
    – Lukas
    Commented el 29 sept. 2017 a las 18:00
  • 1
    Position:sticky; :)
    – Risa__B
    Commented el 7 oct. 2017 a las 4:09

1 respuesta 1

1

Debes usar position relative/absolute con el contenido de la pág/ contenedor del div . El div flotante(position fixed) debe estar dentro de otro div, el cual es absolute.

Espero que sea de ayuda

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.