Element am oberen Rand der übergeordneten Elements anstoßen

[Leuchtfeuer18]

Moin!

Ich habe folgendes Layout und bereits mehrere Tage nach einer Lösung gesucht.

_____________________
|                     |

F1
F2
-----
F3
-----
F4
---------------------

In F2 befindet sich ein kleiner Text, F3 ist eine horizontale Navigationsleiste welche zur langen Liste F4 gehört. F4 muss aufgrund der Länge gescrollt werden. Dabei bleiben F1 und F5 stehen, F2 soll zuerst nach oben verschwinden, F3 aber unter F1 'kleben' und immer sichtbar bleiben.

Hat jemand eine Idee wie dies am Besten mit reinem CSS, notgedrungen mit nicht rechenintensivem JavaScript, realisierbar wäre?

Danke, Leuchtfeuer18

[Georg]

Moin!

display:none;
display:block;

[Leuchtfeuer18]

Danke an alle!

Folgendes Javascript in Kombination mit jQuery funktioniert bei mir:

  
   $(window).scroll(function() {  
      if($(window).scrollTop() > ($("#F3").outerHeight()*2)) {  
         $("#F3").css("position","fixed");  
         $("#F3").css("top",0);  
       } else {  
         $("#F3").css("position","static");  
       }  
     });  

[Matthias Apsel]

Om nah hoo pez nyeetz, Leuchtfeuer18!

Navigation bei Bedarf fixieren

Matthias