Axel Richter: DIV soll beim Scrollen der Seite mitscrollen

Beitrag lesen

SELF-Forum

DIV soll beim Scrollen der Seite mitscrollen

Axel Richter
– Informationen zu den Bewertungsregeln

Hallo,

ich habe ein Script, welches mir einen DIV-Bereich beim Scrollen der Seite mitscrollt.

Hm, es sieht eher so aus, als sollte das DIV("Dies ist ein Testtext :-)") _nicht_ mitscrollen, also imme an Position top:150px; am rechten Seitenrad bleiben.

Hierfür benötigt man für moderne Browser kein JavaScript mehr. Das geht mit CSS position:fixed. Für den IE (bis 6) benötigt man Workarounds, weil dieser position:fixed nicht umsetzt. Manchmal kommen diese Workarounds auch ohne JavaScript aus.

  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"  
        "http://www.w3.org/TR/html4/strict.dtd">  
<html>  
<head>  
<title>CSS position:fixed</title>  
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">  
<style type="text/css">  
* { margin:0; padding:0; }  
#content {background-color:#00FFAF;}  
#fixed {background-color:#FF7F7F; position:fixed; top:150px; right:0;}  
</style>  
  
<!--[if ie]>  
<style type="text/css">  
html, body { height:100%; overflow:hidden; }  
#content {height:100%; overflow:auto;}  
#fixed {position:absolute; top:150px; right:15px;}  
</style>  
<![endif]-->  
  
</head>  
<body>  
<div id="fixed">Das ist ein Testtext ;-)</div>  
<div id="content">  
Das ist der bewegliche Seiteninhalt mit beliebig viel Text ...  
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>  
</div>  
</body>  
</html>

Erläuterung:
Für moderne Browser wird einfach position:fixed verwendet.

Für den IE wird ein Conditional Comment eingesetzt, in dem _nur_ für ihn HTML und BODY in der Höhe auf 100% Browserfensterhöhe begrenzt werden und keinen überfließenden Inhalt mehr anzeigen (overflow:hidden;). Dadurch wird das DIV#content zum eigentlichen BODY mit 100% Browserfensterhöhe, welcher bei überfließendem Inhalt Scrollbalken anbietet (overflow:auto;). Da das DIV#fixed nun außerhalb dieses Pseudo-BODYs liegt, wirkt position:absolute hier nun ähnlich wie position:fixed.

viele Grüße

Axel

Beitrag melden
–
Informationen zu den Bewertungsregeln