Verständnisfrage bzgl. Position von

Computer: Software & Programmierung JavaScript & Script-Sprachen
#1

Hallo miteinander,

hallo, speziell KKO!

Ich habe eine Verständnisfrage (eigentlich 2)

Klaus, Du hast mir folgendes Script geschenkt (beim scrollen wird div 2 quasi auf position:fixed gesetzt):

div {margin:0px;position:relative;}
#div1{border:1px solid blue;height:200px;}
#div2{border:1px solid red;height:100px;}
#div3{border:1px solid green;height:2000px;}
div1
div2
div3

var elem = document.getElementById(‚div2‘);
var pos= 200;
window.onscroll = function () {
var scroll = window.pageYOffset;
if( document.body ){ scroll = document.body.scrollTop;}
if ( scroll > pos ){
var neu=scroll - pos ;
elem.style.top= neu + „px“; }
window.setTimeout(„test()“, 50);
}

function test(){
var scroll = window.pageYOffset;
if( document.body ){ scroll = document.body.scrollTop;}
if ( scroll < 2 ){elem.style.top= 0 + „px“;}
}

Warum muss das Tag im Body stehen… normalerweise stehen ja Scripts im head… aber warum funktoiniert das script nicht, wenn ich es in den head Bereich auslagere?

  1. Frage:

var scroll = window.pageYOffset;
if( document.body ){ scroll = document.body.scrollTop;}

funktioniert bei mir gar nicht :frowning:

Wenn ich aber schreibe:

var scroll = window.pageYOffset;
<!–[if IE]>
var scroll = document.documentElement.scrollTop ;
<!–<![endif]–>

dann klappt es in allen Browsern tadellos…

Bin ein wenig ratlos und hoffe auf Eure Erleuchtung!

Vielen Dank

Midir

#2

Hallo Midir,

Warum muss das Tag im Body stehen… normalerweise
stehen ja Scripts im head… aber warum funktoiniert das
script nicht, wenn ich es in den head Bereich auslagere?

damit diese Zuweisung erfolgreich ist:
<small><b>var elem = document.getElementById(‚div2‘);</b></small>

geht aber auch mit
<small><b>
window.onload=function(){
var elem = document.getElementById(‚div2‘);
} </b></small>
falls Du Script in den Head oder externe Datei verlagern willst.

  1. Frage:
    <!–[if IE]>
    var scroll = <b><i>document.documentElement.scrollTop</i></b> ;
    <!–<![endif]–>

hängt mit dem Modus zusammen,
script läuft bei mir im IE 8 ohne [IF IE] … im Quirks :smile:)

Gruß
Klaus

#3

Hallo Midir,

hier nochmal für den Standard-Modus und script im HEAD-Bereich:


div {margin:0px;position:relative;}
#div1{border:1px solid blue;height:200px;}
#div2{border:1px solid red;height:100px;background-color:lavender}
#div3{border:1px solid green;height:2000px;}

var pos= 200; var scroll=0; var elem="";

window.onload=function(){
elem = document.getElementById(‚div2‘);
alert(elem.id)
}

window.onscroll = function () {
scroll = holX();
if ( scroll > pos ){
var neu=scroll - pos ;
elem.style.top= neu + „px“;}
else {elem.style.top= „0px“;}
window.setTimeout(„test()“, 50);
}

function test(){
scroll = holX()
if ( scroll < 2 ){elem.style.top= 0 + „px“;}
}

function holX() {
var Y;
if(typeof(window.pageYOffset)==‚number‘) {
Y=window.pageYOffset;
}
else {Y=document.documentElement.scrollTop; }
return Y;
}
div1
div2
div3

Gruß
Klaus

#4

alert(elem.id)
hatte ich nur zum Testen :smile:)

#5

Hallo Klaus,

wie immer genau das, was ich suchte :wink:

Danke Dir für Deine Mühe

Grüße

Midir