IE reagiert nicht auf: document.getElementById("myID").style.position = 'fixed';

soezkan

soezkan

Erfahrenes Mitglied
Hallo zusammen,

alle Browser machen was ich will, nur mal wieder der IE nicht (IE8 in meinem Fall).
Ich will, dass wenn der Benutzer 400 Pixel nach unten gescrolled hat etwas passiert,
nämlich das gewünschte DIV einen roten Hintergrund bekommt und position: fixed.

Die Abfrage geht auch und ich habe mir mal ein Alert ausgeben lassen, was
auch im IE angezeigt wird. Wieso aber kann ich per ...
Code: 
document.getElementById("NavigationBox").style.position = 'fixed';
das dem IE nicht beibringen was er soll?

Es ist ein Beispiel am Ende dieses Posts.

1000 Dank für Hilfe! :)
Soezkan


Code: 
<html xmlns="http://www.w3.org/1999/xhtml" >
<head><title>Test</title>
<script type="text/javascript">
<!--
function getScrollXY() {
	var scrOfX = 0, scrOfY = 0;
 
	if( typeof( window.pageYOffset ) == 'number' ) {
		//Netscape compliant
		scrOfY = window.pageYOffset;
		scrOfX = window.pageXOffset;
	} 
	else if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ) {
		//DOM compliant
		scrOfY = document.body.scrollTop;
		scrOfX = document.body.scrollLeft;
	} 
	else if( document.documentElement && ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) ) {
		//IE6 standards compliant mode
		scrOfY = document.documentElement.scrollTop;
		scrOfX = document.documentElement.scrollLeft;
	}
	//alert("Horizontal: " + scrOfX + "px<br/>Vertical: " + scrOfY + "px");
	//return [scrOfX, scrOfY];
	if(scrOfY > 400) {
		//alert(scrOfY);
		document.getElementById("NavigationBox").style.position = 'fixed';
		document.getElementById("NavigationBox").style.backgroundColor = 'red';
	}
	if(scrOfY <= 400) {
		document.getElementById("NavigationBox").style.position = 'relative';
		document.getElementById("NavigationBox").style.backgroundColor = '';
	}

}

//-->
</script>
</head>
<body onscroll="getScrollXY()">
<div id="NavigationBox"><h1>Absatz</h1></div>
<p>Ut eget nulla lectus! Morbi orci turpis, euismod nec faucibus sit amet, malesuada in ipsum. Vestibulum non nisi quam. Vestibulum id nulla adipiscing urna dignissim adipiscing sed quis lacus. Morbi eleifend tellus sit amet tellus tempus gravida. Nam erat sapien, luctus eget ultrices at, facilisis ac orci. Proin iaculis pretium ipsum, et ullamcorper augue vulputate quis! Aenean tincidunt elit vitae leo rhoncus sagittis. Sed vel sapien nec lorem porta tincidunt a sit amet massa. Nullam ut ante lorem, nec scelerisque mauris.</p>
      <p>Curabitur mattis felis id sapien adipiscing et bibendum sapien varius? Fusce nec interdum massa! Donec a malesuada ligula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus sed tempus neque? Etiam quam odio, vulputate eu scelerisque et, tempor eu leo. Quisque sed fermentum velit. Nunc suscipit orci nisi. Aenean egestas, sapien et molestie hendrerit, dolor ante tristique lacus, eu accumsan lectus purus at diam. Mauris eros lacus, interdum sed luctus commodo; lacinia non diam. Quisque imperdiet, mi at facilisis auctor, tellus nibh tincidunt magna, eget ornare sapien ante in orci. Donec blandit convallis nulla sed condimentum. Nam mauris nibh; faucibus at tempor nec; aliquam eu justo. Nam hendrerit odio elementum purus pellentesque et convallis nisl interdum. Duis hendrerit orci id purus cursus cursus. Nullam porttitor eros vel enim posuere sed bibendum diam ullamcorper. Etiam faucibus risus non leo adipiscing sit amet accumsan lacus facilisis. Maecenas viverra, sapien non volutpat vehicula, enim urna tempus leo, rutrum pellentesque libero orci eget augue? Sed iaculis velit a lectus pharetra sodales! Ut sit amet ligula libero.</p>
      <p>Nunc tristique dui ultricies felis interdum rutrum. Cras id mi purus. Nullam hendrerit suscipit eros vel venenatis. Praesent ultricies varius interdum. Morbi eget diam nulla? Quisque luctus, lorem eget pharetra imperdiet, quam nunc lacinia felis, ac aliquet elit nisl nec mauris. Curabitur nisl ligula, sollicitudin vel varius dignissim, facilisis porttitor erat? Ut diam justo, elementum non vehicula sit amet; fringilla ac purus. Nulla varius malesuada sagittis. Suspendisse eget pellentesque augue. Quisque ornare, nunc at volutpat dapibus, turpis dui consequat elit, et feugiat augue felis in sapien. Aliquam consequat vestibulum arcu, eu facilisis libero sagittis id. Praesent ac consectetur eros. Morbi non fringilla elit. In hac habitasse platea dictumst. Etiam dignissim congue erat, vitae tincidunt est tincidunt sit amet. Vivamus sit amet augue diam? Curabitur enim arcu, euismod at semper sit amet; scelerisque eu sapien. Quisque nisl erat, euismod adipiscing faucibus eu, rutrum tristique sapien. Sed in erat turpis.</p>
      <p>Integer nulla risus, ullamcorper tincidunt iaculis placerat, hendrerit ac elit. Integer adipiscing, orci blandit lacinia cursus, risus urna mattis nunc, id venenatis orci elit aliquam magna. Nunc vehicula sollicitudin eros et luctus! Quisque gravida volutpat est at gravida. Suspendisse at tristique ligula. Donec blandit, turpis nec vehicula scelerisque, sapien magna interdum tortor, accumsan consectetur sem lectus vel nunc. Sed blandit, ipsum id cursus condimentum, leo odio vulputate eros, non dictum risus libero in mi! Vivamus in scelerisque metus. Aliquam rutrum nulla at arcu faucibus pharetra? Aenean dignissim sapien et eros ullamcorper sodales. Donec metus neque, vulputate eu tempor et, dapibus at orci. Duis at quam ante. Proin eget purus lorem, a tincidunt dolor. Phasellus quis metus tortor. Integer scelerisque mi nibh, vitae imperdiet quam. Aliquam sagittis nunc vitae arcu blandit hendrerit. Donec dolor erat, venenatis ut feugiat et, pulvinar in leo. In commodo nunc sit amet eros vulputate et eleifend ligula dapibus.</p>
      <p>Mauris quam massa, pharetra a facilisis at, imperdiet ut ipsum. Donec vitae elit ac ligula fermentum condimentum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi laoreet turpis vitae nulla ornare sit amet viverra ante blandit. Cum sociis natoque penatibus et maUt eget nulla lectus! Morbi orci turpis, euismod nec faucibus sit amet, malesuada in ipsum. Vestibulum non nisi quam. Vestibulum id nulla adipiscing urna dignissim adipiscing sed quis lacus. Morbi eleifend tellus sit amet tellus tempus gravida. Nam erat sapien, luctus eget ultrices at, facilisis ac orci. Proin iaculis pretium ipsum, et ullamcorper augue vulputate quis! Aenean tincidunt elit vitae leo rhoncus sagittis. Sed vel sapien nec lorem porta tincidunt a sit amet massa. Nullam ut ante lorem, nec scelerisque mauris.</p>
      <p>Curabitur mattis felis id sapien adipiscing et bibendum sapien varius? Fusce nec interdum massa! Donec a malesuada ligula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus sed tempus neque? Etiam quam odio, vulputate eu scelerisque et, tempor eu leo. Quisque sed fermentum velit. Nunc suscipit orci nisi. Aenean egestas, sapien et molestie hendrerit, dolor ante tristique lacus, eu accumsan lectus purus at diam. Mauris eros lacus, interdum sed luctus commodo; lacinia non diam. Quisque imperdiet, mi at facilisis auctor, tellus nibh tincidunt magna, eget ornare sapien ante in orci. Donec blandit convallis nulla sed condimentum. Nam mauris nibh; faucibus at tempor nec; aliquam eu justo. Nam hendrerit odio elementum purus pellentesque et convallis nisl interdum. Duis hendrerit orci id purus cursus cursus. Nullam porttitor eros vel enim posuere sed bibendum diam ullamcorper. Etiam faucibus risus non leo adipiscing sit amet accumsan lacus facilisis. Maecenas viverra, sapien non volutpat vehicula, enim urna tempus leo, rutrum pellentesque libero orci eget augue? Sed iaculis velit a lectus pharetra sodales! Ut sit amet ligula libero.</p>
      <p>Nunc tristique dui ultricies felis interdum rutrum. Cras id mi purus. Nullam hendrerit suscipit eros vel venenatis. Praesent ultricies varius interdum. Morbi eget diam nulla? Quisque luctus, lorem eget pharetra imperdiet, quam nunc lacinia felis, ac aliquet elit nisl nec mauris. Curabitur nisl ligula, sollicitudin vel varius dignissim, facilisis porttitor erat? Ut diam justo, elementum non vehicula sit amet; fringilla ac purus. Nulla varius malesuada sagittis. Suspendisse eget pellentesque augue. Quisque ornare, nunc at volutpat dapibus, turpis dui consequat elit, et feugiat augue felis in sapien. Aliquam consequat vestibulum arcu, eu facilisis libero sagittis id. Praesent ac consectetur eros. Morbi non fringilla elit. In hac habitasse platea dictumst. Etiam dignissim congue erat, vitae tincidunt est tincidunt sit amet. Vivamus sit amet augue diam? Curabitur enim arcu, euismod at semper sit amet; scelerisque eu sapien. Quisque nisl erat, euismod adipiscing faucibus eu, rutrum tristique sapien. Sed in erat turpis.</p>
      <p>Integer nulla risus, ullamcorper tincidunt iaculis placerat, hendrerit ac elit. Integer adipiscing, orci blandit lacinia cursus, risus urna mattis nunc, id venenatis orci elit aliquam magna. Nunc vehicula sollicitudin eros et luctus! Quisque gravida volutpat est at gravida. Suspendisse at tristique ligula. Donec blandit, turpis nec vehicula scelerisque, sapien magna interdum tortor, accumsan consectetur sem lectus vel nunc. Sed blandit, ipsum id cursus condimentum, leo odio vulputate eros, non dictum risus libero in mi! Vivamus in scelerisque metus. Aliquam rutrum nulla at arcu faucibus pharetra? Aenean dignissim sapien et eros ullamcorper sodales. Donec metus neque, vulputate eu tempor et, dapibus at orci. Duis at quam ante. Proin eget purus lorem, a tincidunt dolor. Phasellus quis metus tortor. Integer scelerisque mi nibh, vitae imperdiet quam. Aliquam sagittis nunc vitae arcu blandit hendrerit. Donec dolor erat, venenatis ut feugiat et, pulvinar in leo. In commodo nunc sit amet eros vulputate et eleifend ligula dapibus.</p>
      <p>Mauris quam massa, pharetra a facilisis at, imperdiet ut ipsum. Donec vitae elit ac ligula fermentum condimentum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi laoreet turpis vitae nulla ornare sit amet viverra ante blandit. Cum sociis natoque penatibus et maUt eget nulla lectus! Morbi orci turpis, euismod nec faucibus sit amet, malesuada in ipsum. Vestibulum non nisi quam. Vestibulum id nulla adipiscing urna dignissim adipiscing sed quis lacus. Morbi eleifend tellus sit amet tellus tempus gravida. Nam erat sapien, luctus eget ultrices at, facilisis ac orci. Proin iaculis pretium ipsum, et ullamcorper augue vulputate quis! Aenean tincidunt elit vitae leo rhoncus sagittis. Sed vel sapien nec lorem porta tincidunt a sit amet massa. Nullam ut ante lorem, nec scelerisque mauris.</p>
      <p>Curabitur mattis felis id sapien adipiscing et bibendum sapien varius? Fusce nec interdum massa! Donec a malesuada ligula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus sed tempus neque? Etiam quam odio, vulputate eu scelerisque et, tempor eu leo. Quisque sed fermentum velit. Nunc suscipit orci nisi. Aenean egestas, sapien et molestie hendrerit, dolor ante tristique lacus, eu accumsan lectus purus at diam. Mauris eros lacus, interdum sed luctus commodo; lacinia non diam. Quisque imperdiet, mi at facilisis auctor, tellus nibh tincidunt magna, eget ornare sapien ante in orci. Donec blandit convallis nulla sed condimentum. Nam mauris nibh; faucibus at tempor nec; aliquam eu justo. Nam hendrerit odio elementum purus pellentesque et convallis nisl interdum. Duis hendrerit orci id purus cursus cursus. Nullam porttitor eros vel enim posuere sed bibendum diam ullamcorper. Etiam faucibus risus non leo adipiscing sit amet accumsan lacus facilisis. Maecenas viverra, sapien non volutpat vehicula, enim urna tempus leo, rutrum pellentesque libero orci eget augue? Sed iaculis velit a lectus pharetra sodales! Ut sit amet ligula libero.</p>
      <p>Nunc tristique dui ultricies felis interdum rutrum. Cras id mi purus. Nullam hendrerit suscipit eros vel venenatis. Praesent ultricies varius interdum. Morbi eget diam nulla? Quisque luctus, lorem eget pharetra imperdiet, quam nunc lacinia felis, ac aliquet elit nisl nec mauris. Curabitur nisl ligula, sollicitudin vel varius dignissim, facilisis porttitor erat? Ut diam justo, elementum non vehicula sit amet; fringilla ac purus. Nulla varius malesuada sagittis. Suspendisse eget pellentesque augue. Quisque ornare, nunc at volutpat dapibus, turpis dui consequat elit, et feugiat augue felis in sapien. Aliquam consequat vestibulum arcu, eu facilisis libero sagittis id. Praesent ac consectetur eros. Morbi non fringilla elit. In hac habitasse platea dictumst. Etiam dignissim congue erat, vitae tincidunt est tincidunt sit amet. Vivamus sit amet augue diam? Curabitur enim arcu, euismod at semper sit amet; scelerisque eu sapien. Quisque nisl erat, euismod adipiscing faucibus eu, rutrum tristique sapien. Sed in erat turpis.</p>
      <p>Integer nulla risus, ullamcorper tincidunt iaculis placerat, hendrerit ac elit. Integer adipiscing, orci blandit lacinia cursus, risus urna mattis nunc, id venenatis orci elit aliquam magna. Nunc vehicula sollicitudin eros et luctus! Quisque gravida volutpat est at gravida. Suspendisse at tristique ligula. Donec blandit, turpis nec vehicula scelerisque, sapien magna interdum tortor, accumsan consectetur sem lectus vel nunc. Sed blandit, ipsum id cursus condimentum, leo odio vulputate eros, non dictum risus libero in mi! Vivamus in scelerisque metus. Aliquam rutrum nulla at arcu faucibus pharetra? Aenean dignissim sapien et eros ullamcorper sodales. Donec metus neque, vulputate eu tempor et, dapibus at orci. Duis at quam ante. Proin eget purus lorem, a tincidunt dolor. Phasellus quis metus tortor. Integer scelerisque mi nibh, vitae imperdiet quam. Aliquam sagittis nunc vitae arcu blandit hendrerit. Donec dolor erat, venenatis ut feugiat et, pulvinar in leo. In commodo nunc sit amet eros vulputate et eleifend ligula dapibus.</p>
      <p>Mauris quam massa, pharetra a facilisis at, imperdiet ut ipsum. Donec vitae elit ac ligula fermentum condimentum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi laoreet turpis vitae nulla ornare sit amet viverra ante blandit. Cum sociis natoque penatibus et maUt eget nulla lectus! Morbi orci turpis, euismod nec faucibus sit amet, malesuada in ipsum. Vestibulum non nisi quam. Vestibulum id nulla adipiscing urna dignissim adipiscing sed quis lacus. Morbi eleifend tellus sit amet tellus tempus gravida. Nam erat sapien, luctus eget ultrices at, facilisis ac orci. Proin iaculis pretium ipsum, et ullamcorper augue vulputate quis! Aenean tincidunt elit vitae leo rhoncus sagittis. Sed vel sapien nec lorem porta tincidunt a sit amet massa. Nullam ut ante lorem, nec scelerisque mauris.</p>
      <p>Curabitur mattis felis id sapien adipiscing et bibendum sapien varius? Fusce nec interdum massa! Donec a malesuada ligula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus sed tempus neque? Etiam quam odio, vulputate eu scelerisque et, tempor eu leo. Quisque sed fermentum velit. Nunc suscipit orci nisi. Aenean egestas, sapien et molestie hendrerit, dolor ante tristique lacus, eu accumsan lectus purus at diam. Mauris eros lacus, interdum sed luctus commodo; lacinia non diam. Quisque imperdiet, mi at facilisis auctor, tellus nibh tincidunt magna, eget ornare sapien ante in orci. Donec blandit convallis nulla sed condimentum. Nam mauris nibh; faucibus at tempor nec; aliquam eu justo. Nam hendrerit odio elementum purus pellentesque et convallis nisl interdum. Duis hendrerit orci id purus cursus cursus. Nullam porttitor eros vel enim posuere sed bibendum diam ullamcorper. Etiam faucibus risus non leo adipiscing sit amet accumsan lacus facilisis. Maecenas viverra, sapien non volutpat vehicula, enim urna tempus leo, rutrum pellentesque libero orci eget augue? Sed iaculis velit a lectus pharetra sodales! Ut sit amet ligula libero.</p>
      <p>Nunc tristique dui ultricies felis interdum rutrum. Cras id mi purus. Nullam hendrerit suscipit eros vel venenatis. Praesent ultricies varius interdum. Morbi eget diam nulla? Quisque luctus, lorem eget pharetra imperdiet, quam nunc lacinia felis, ac aliquet elit nisl nec mauris. Curabitur nisl ligula, sollicitudin vel varius dignissim, facilisis porttitor erat? Ut diam justo, elementum non vehicula sit amet; fringilla ac purus. Nulla varius malesuada sagittis. Suspendisse eget pellentesque augue. Quisque ornare, nunc at volutpat dapibus, turpis dui consequat elit, et feugiat augue felis in sapien. Aliquam consequat vestibulum arcu, eu facilisis libero sagittis id. Praesent ac consectetur eros. Morbi non fringilla elit. In hac habitasse platea dictumst. Etiam dignissim congue erat, vitae tincidunt est tincidunt sit amet. Vivamus sit amet augue diam? Curabitur enim arcu, euismod at semper sit amet; scelerisque eu sapien. Quisque nisl erat, euismod adipiscing faucibus eu, rutrum tristique sapien. Sed in erat turpis.</p>
      <p>Integer nulla risus, ullamcorper tincidunt iaculis placerat, hendrerit ac elit. Integer adipiscing, orci blandit lacinia cursus, risus urna mattis nunc, id venenatis orci elit aliquam magna. Nunc vehicula sollicitudin eros et luctus! Quisque gravida volutpat est at gravida. Suspendisse at tristique ligula. Donec blandit, turpis nec vehicula scelerisque, sapien magna interdum tortor, accumsan consectetur sem lectus vel nunc. Sed blandit, ipsum id cursus condimentum, leo odio vulputate eros, non dictum risus libero in mi! Vivamus in scelerisque metus. Aliquam rutrum nulla at arcu faucibus pharetra? Aenean dignissim sapien et eros ullamcorper sodales. Donec metus neque, vulputate eu tempor et, dapibus at orci. Duis at quam ante. Proin eget purus lorem, a tincidunt dolor. Phasellus quis metus tortor. Integer scelerisque mi nibh, vitae imperdiet quam. Aliquam sagittis nunc vitae arcu blandit hendrerit. Donec dolor erat, venenatis ut feugiat et, pulvinar in leo. In commodo nunc sit amet eros vulputate et eleifend ligula dapibus.</p>
      <p>Mauris quam massa, pharetra a facilisis at, imperdiet ut ipsum. Donec vitae elit ac ligula fermentum condimentum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi laoreet turpis vitae nulla ornare sit amet viverra ante blandit. Cum sociis natoque penatibus et ma</p>
</body>
</html>
 
Zuletzt bearbeitet:
Hi,

ohne jegliche Doctype-Deklaration zu Beginn eines (X)HTML-Dokuments schalten alle Browser in den "Quirks Mode", und in diesem Darstellungsmodus verhalten sich IE7 und IE8 entgegen dem "Standards Mode", wie ihr Vorgänger IE6, der position:fixed noch nie zu interpretieren wußte, und aus diesem Grund ihm in der Vergangenheit, als er noch die aktuelle Version repräsentierte, diverse Workarounds in CSS oder JS gewidmet wurden.


mfg Maik
 
Danke für die Antwort. Habe entsprechenden Doctype hinzugefügt.

Trotzdem alles beim alten

Geht das für den IE oder nicht?
Code: 
document.getElementById("NavigationBox").style.position = 'fixed';



Liebe Grüße
Soezkan
 
Zuletzt bearbeitet:
Mit dem integrierten Entwicklertool im IE8 (Aufruf per "F12"-Taste) hast du u.a. die Möglichkeit, zwischen diesen Browser-Modi:

  1. IE7
  2. IE8
  3. IE8-Kompatibilitätsansicht
und Dokument-Modi umzuschalten:
  1. Quirksmodus
  2. IE7-Standards
  3. IE8-Standards

Lediglich mit "IE7-Standards" funktioniert dein eingangs gezeigter Code in allen drei Browser-Modi reibungslos. Die Script-Zeile in deiner Rückfrage von eben für sich alleine betrachtet, aber gleichermaßen mit "IE8-Standards".

Entgegen deiner Aussage im Themenbetreff, gilt somit stattdessen die Ursache im Code zu finden, warum IE8 in seinem eigenen standardkonformen Dokumentmodus nicht (mehr) auf die drei rotmarkierten Zeilen reagiert, wie es deine zwischengeschobenen alert(...)-Methoden im Anschluß belegen, wenn davor die Kommentar-Syntax entfernt wird:

Code: 
	else if( document.documentElement && ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) ) {
		//IE6 standards compliant mode
		scrOfY = document.documentElement.scrollTop;
		scrOfX = document.documentElement.scrollLeft;
	}
	//alert("Horizontal: " + scrOfX + "px<br/>Vertical: " + scrOfY + "px");
	//return [scrOfX, scrOfY];
	if(scrOfY > 400) {
		//alert(scrOfY);
		document.getElementById("NavigationBox").style.position = 'fixed';
		document.getElementById("NavigationBox").style.backgroundColor = 'red';
	}


mfg Maik
 
Vielen Dank für die hilfreichen Antworten.

Mit dem Doctype ...
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
... welcher dem Quirksmode entspricht, reagiert der IE8 zumindest auf das onScroll-Event,
kapiert aber das ...
Code: 
document.getElementById("NavigationBox").style.position = 'fixed';
... leider nicht

Mit diesem ...
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
... wird onScroll komplett ignoriert

Scheint ja der Spezialfall eines Spezialfalls zu sein.

Gibt es denn kein JS- bzw jQuery-Skript, was meine Aufgabe erfüllt:
ich habe sowas im Magento-Shop im Backend und auch schon auf anderen
Seiten gesehen:
sobald der Browser um eine bestimmte Länge nach unten gescrollt wurde, wird
oben, an das obere Ende des Browser-Contents, eine halb-transparente Leiste
angezeigt, die wieder verschwindet, wenn man nach ganz oben gescrollt hat.

Eine Idee?

Lieben Dank,
Soezkan
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück