Open the code in full screen!!!
I want to get "THE FLOATING DIV" to start floating only when the top edge of the screen touches it, before then I want my "FLOATING DIV" to stay in place under the 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>
I want the space between the floating div and the top of the browser to be 0px.
You must use position relative/absolute with the content of the page/div container. The floating(position fixed) div must be inside another div, which is absolute.
I hope it helps