|
|
Das kann man auf 2 Wegen erreichen. Zum einen bietet CSS die Möglichkeit, mit der Angabe fixed für das CSS-Attribut position , Seitenelemente
im Anzeigefenster an ihrer Position zu fixieren.
Diese Angabe wird allerdings nur von einer begrenzten Anzahl von Browsern, wie z.B. Mozilla, Netscape7 oder Opera ab Version6 interpretiert, hingegen bspw. vom Internet-Explorer derzeit noch nicht.
Beispiel #1
Seiteninhalt fixieren mittels CSS
Quelltext des fixierten Elements:
 |
|
|
|
<h1 style="position:fixed;top:30px;left:20px;">
Scrolle herum, in einigen Browsern bleibe ich, wo ich bin!
</h1>
|
|
|
|
|
Erläuterung:
Mit der CSS-Positionsbestimmung fixed wird erreicht, dass das damit formatierte Element <h1>auch beim Scrollen an der
selben Position im Anzeigefenster verharrt, im Beispiel 30 Pixel von oben und 20 Pixel von Links.
Mit Javascript ist es möglich, auch in anderen Browsern diesen Effekt zu erzielen.
Beispiel
Seiteninhalt fixieren mittels Javascript
Quelltext der Seite:
|
|
|
|
<html>
<head>
<title>Test</title>
</head>
<body>
<h1 style="position:absolute;top:30px;left:20px;"id="fix">
Scrolle herum, in einigen Browsern bleibe ich, wo ich bin!
</h1>
<script type="text/javascript">
<!--
function fixieren()
{
objX=150;
objY=100;
if(document.all&&!window.opera)
{
scrollX =document.body.scrollLeft;
scrollY =document.body.scrollTop;
styleObj =document.all.fix.style;
}
else if(document.getElementById||document.layers)
{
scrollX =window.pageXOffset;
scrollY =window.pageYOffset;
if(document.layers)
{
styleObj=document.fix;
}
else
{
styleObj=document.getElementById('fix').style;
}
}
if(typeof scrollX!='undefined')
{
styleObj.left=objX+scrollX;
styleObj.top=objY+scrollY;
setTimeout('fixieren()',100);
}
}
fixieren();
//-->
</script>
</body>
</html>
|
|
|
|
|
Erläuterung:
Die Seite enthält wie in Beispiel #1 eine Überschrift <h1>, welche diesmal allerdings mit CSS absolute positioniert wurde.
Das Skript in der Seite kontrolliert 10 mal pro Sekunde, ob in der Seite gescrollt wurde. Dazu müssen je nach Browser unterschiedliche Eigenschaftswerte ermittelt werden.
Während man im Internet-Explorer die gescrollte Strecke mit document.body.scrollLeft bzw. document.body.scrollTop erfragt, geschieht dies
in anderen Browsern mit window.pageXOffset und window.pageYOffset. Diese Werte werden im Folgenden mit den eingangs im Skript definierten Variablen
objX und objY, welche die ursprüngliche, lt. CSS definierte Position des Elementes enthalten, addiert und dementsprechend top und left des Elementes, welches im Skript anhand
seiner ID fix angesprochen wird, neu gesetzt.
|
|
