position fixed + absolute "max-top"

[Max]

Hallo,
ich habe eine Wunschvorstellung wie der Kopf meiner Seite aussehen soll, weiß aber nicht wie es geht und ob es überhaupt funktioniert.
Ich habe hier ein Beispiel an dem ich zeigen will, was ich mir vorstelle:

<div id="div1kopf" style="background-color:red;position:fixed;width:500px;height:300px;top:0px;z-index:3"></div>  
<div id="div2kopf" style="background-color:green;position:absolute;width:600px;height:300px;top:300px;z-index:2"></div>  
<div id="div3kopf" style="background-color:blue;position:absolute;width:700px;height:300px;top:600px;z-index:1"></div>  
<div id="div4webinhalt" style="background-color:aqua;position:absolute;width:800px;height:300px;top:900px;z-index:0"></div>

In dem Beispiel sind 4 Balken mit div erstellt worden. div1kopf ist fixed ganz oben. Div2kopf, Div3kopf und Div4Webinhalt sind absolute und lassen sich hoch scrollen. Mein Wunsch ist es, dass beim hoch scrollen Div2kopf oben hinter Div1kopf verschwinden, Div3kopf soll aber bis maximal top:300px hochgehen und nicht weiter (sprich, bis zur höhe von Div1kopf), also sozusagen max-top:300px oder so. Und Div4webinhalt soll dann auch hinter Div1kopf und div3kopf verschwinden.

Ich hoffe mein Anliegen wird mit dem Beispiel klar und natürlich dass es dafür eine Lösung gibt :)

Gruß Max