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.