Q:

¿Cómo hacer que un div que tenga posición fixed top sólo cuando la parte superior de la pantalla lo toque?

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.

A:

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

