Einscrollendes, dann fixes Element (CSS)

[olwe-y]

Hallo miteinander,
ich möchte einen "Nach oben"-Link auf einer Seite einbauen, der – wenn die Seite ganz oben ist –, unterhalb (außerhalb) des aktuellen Fensters "wartet", also erst wenn man nach unten scrollt, mit sichtbar wird. Wenn er aber auf der Seite angekommen ist, soll er stets am unteren Ende des Fensters verharren, ca. 10 Pixel über dem unteren Rand.
Teil 1 ist einfach: <div style="position:absolute; top:100%; margin-top:30px">Nach oben</div> [Link hier weggelassen]

Teil 2 wäre: <div style="position:fixed; top:100%; margin-top:-30px">Nach oben</div>

Wie kombiniert man das ganze nun? Dass es lösbar ist, zeigt der sogenannte "MyXingBar", der beim Laden der Startseite das eigene Portraitfoto zunächst ca. 65 px. vom oberen Rand unterhalb des Xing-Logos zeigt, beim Scrollen bleiben das Foto und die Pictogramme darunter aber sozusagen am oberen Fensterrand hängen.
Freue mich über Hilfe, ggf. auch einfach einen Link – mit meinen Stichworten habe ich über die Suchfunktion nichts gefunden.
Gruß aus Hamburg,
olwe-y

 

[iRocko]

Mit JavaScript die Scrollposition des Fensters abfragen und ab Wert x die Klasse des Elementes und somit seinen Style wechseln.

 

[Zieger]

so was? http://webdesignerwall.com/demo/scroll-to-top/scrolltotop.html

anleitung gibt's hier: http://webdesignerwall.com/tutorials/animated-scroll-to-top