fixlayer
Mit CSS lassen sich Bereiche einfach fixieren. Die Angabe position:fixed sorgt dafür, dass der Layer an der Position fixiert bleibt, an der er gerade steht.
Das Problem mit fixed ist, dass es u.a. der IE noch nicht umsetzt, d.h. er ignoriert position:fixed. Deshalb entstand diese Javascript Funktion um einen Bereich zu fixieren. Ich habe das Skript Beispielhaft hier in die Seite eingebaut.
Syntax
fixLayer(id)
Parameter
id Ein Zeichenkette das die ID des gesuchten Elementes enthält.
Beispiel
<div id="fix" style="bottom:0;z-index:100;background-color:#ff0;border:1px solid red;">Ein Beispiel</div> |
<script type="text/javascript"> |
window.onload = function() { fixLayer("fix") ; };
|
</script> |
Download
fixlayer.js 2 KB
/* |
Datei: fixlayer.js |
Datum: 17.05.04 |
Autor: J. Strübig <jstruebig@web.de> |
*/ |
//////////////////////////////////////////////////////////// |
// Ein Layer fixieren |
var canFix = null; |
function fixLayer(id) { |
var win = window; |
var obj = document.getElementById ? win.document.getElementById(id) |
: document.all ? win.document.all[id] : document.layers ? win.document.layers[id] : null; |
if(!obj) return alert('Fehler\n\nID:' + id + ' existiert nicht.'); |
// Ein Test, ob der Browser position:fixed umsetzt |
if(canFix == null) { |
var top = obj.offsetTop; |
obj.style.position = 'fixed'; |
win.scrollBy(0,1); |
canFix = (top != obj.offsetTop) |
win.scrollBy(0,1); |
} |
if(canFix) { |
obj.style.position = 'fixed'; |
return; |
} |
if(obj.style) obj.style.position = 'absolute'; |
_STICKY_OBJ_[_STICKY_OBJ_.length] = new Sticky(obj); |
_fixLayer_(); |
// Nur einmal initialisieren |
if(_STICKY_OBJ_.length > 1) return obj; |
if (typeof win.onscroll != 'undefined') win.onscroll = _fixLayer_; |
else if(typeof document.layers != 'undefined') setInterval ('_fixLayer_()', 150); |
else window.setInterval ('_fixLayer_()', 150); |
return obj |
} |
//////////////////////////////////////////////////////////// |
// Sticky -> Hilfsstruktur um die Startwerte zu sichern |
function Sticky(obj) { |
this.top = obj.offsetTop ? obj.offsetTop: obj.top ; |
this.left = obj.offsetLeft? obj.offsetLeft :obj.left ; |
this.obj = obj; |
} |
//////////////////////////////////////////////////////////// |
// Die eigentliche Funktion um einen Layer zu fixieren |
function _fixLayer_(){ |
var w = window; |
var doc = w.document; |
var oLeft = typeof w.pageXOffset != 'undefined' ? w.pageXOffset : // MZ/NC |
(doc.compatMode && doc.compatMode == "CSS1Compat") ? // IE im strict Modus |
doc.documentElement.scrollLeft : // Strict Modus |
doc.body.scrollLeft; // Quirks Modus. |
var oTop = typeof w.pageYOffset != 'undefined' ? w.pageYOffset : |
(doc.compatMode && doc.compatMode == "CSS1Compat") ? |
doc.documentElement.scrollTop : |
doc.body.scrollTop; |
for(var i = 0; i < _STICKY_OBJ_.length; i++){ |
var l = _STICKY_OBJ_[i]; |
if(!l) continue; |
var top = l.top + oTop; |
var left = l.left + oLeft; |
if(l.obj.moveTo) l.obj.moveTo(top, left); |
else {l.obj.style.top = top + 'px'; l.obj.style.left = left + 'px'}; |
} |
} |
var _STICKY_OBJ_ = new Array(); // benötigt fixLayer |
Browser
Im Prinzip läuft das Skript auf allen Browsern ab der 4. Generation.
Doch um den Layer positionieren (und damit zu fixieren) zu können,
muss dieser in den 4'er Versionen (IE und NC) mit der Eigenschaft
style="position:absolute" oder
style="position:relative" versehen werden.
Weitere Informationen zu position:fixed
Der IE CSS-Hack
andere L?sung mit Javascript
2916 mal gelesen.
4 Kommentare Einen Kommentar hinterlassen »
Kommentare
Mittwoch 4.Januar 2006: 4:39
Hi,
kann mir eventuell jemand sagen, wie ich das js genau einbinde. Klappt irgendwie nicht richtig. Danke
Mittwoch 4.Januar 2006: 8:37
Genau wie oben beschrieben und du brauchst natürlich einen Layer mit der id "test"
Mittwoch 4.Januar 2006: 17:12
Danke schon mal für die schnelle Antwort. Bei mir meldet der Browser immer "ID:test existiert nicht" Der Fehler liegt sicherlich an mir.
Mittwoch 4.Januar 2006: 17:37
Ja, hast du den einen Bereich mit der ID="test" auf deiner Seite?
Einen Kommentar hinterlassen