Hallo kkapsner,
danke für Deinen Hinweis mit dem active, habe ich nun gemacht.
Ich muss jedoch leider nochmal wegen dem Script nachhaken. Irgendwie habe ich Knoten im Hirn.
Gestern abend, bevor ich den Hinweis im zweiten Absatz gelesen habe, kam mir die Überlegung, dass Scripte (Bedingungen) ja von oben nach unten gelesen werden. Demzufolge ich mit dem größten Wert beginnen muss.
Sage ich in Bedingung 1 "> 1000" (Pixel), so ist diese Bedingung ja auch später bei "> 2000" etc. erfüllt und die Schleife wird nicht weiter durchlaufen. Die Umstellung hatte jedoch nichts bewirkt. Ist diese Überlegung also falsch?
Gut - um mich heran zu tasten habe ich den Code erstmal verschlankt:
Code:
<script>
function scrollpos() {
top = document.body.scrollTop;
//alert(top);
if(document.body.scrollTop > 2000) {
document.getElementById("s1").className = "bulletlist active";
} else {document.getElementById("s0").className = "bulletlist active";
}
}
</script>
Laienhaft einmal ausgedrückt:
- ist die (Web-) Seitenhöhe / Position größer 2000 Pixel, dann aktiviere Element id="s1"
- wenn nicht aktiviere Element id="s0" (also Seite 1 = Ansicht nach dem Laden 0 ganz oben)
Wenn ich die Seite neu lade, ist jedoch kein Element aktiv. Der Punkt "Seite1" wird erst aktiviert, wenn ich kurz gescrollt habe. Das ist natürlich unschön und erschließt sich mir nicht. Habe das Script am Seitencode-Ende, spielt das vielleicht eine Rolle (also vor dem /body).
Scrolle ich nach unten, müsste sich ab Position > 2000 Pixel) das Element "s1" aktivieren - macht es aber nicht. Also funktioniert es ja generell nicht - das mit dem Deaktivieren der Elemente, wenn ein Scrollbereich verlassen wird, ist dann nochmal ein anderes Thema.
Blick es gerade nicht mehr ...
Danke für Eure Unterstützung & Grüße
- - - Aktualisiert - - -
Ich bin jetzt nochmal in mich gegangen und habe nochmals im Web recherchiert.
"Im Prinzip" funktioniert es, wenn nicht ... siehe weiter unten.
Code:
<script>
window.onscroll = function() {myFunction()};
function myFunction() {
if (document.body.scrollTop > 1000 || document.documentElement.scrollTop > 1000) {
document.getElementById("s1").className = "bulletlist active";
document.getElementById("s0 s2 s3 s s5").className = "bulletlist";}
else if (document.body.scrollTop > 2000 || document.documentElement.scrollTop > 2000) {
document.getElementById("s2").className = "bulletlist active";
document.getElementById("s0 s1 s3 s4 "s5").className = "bulletlist";}
else if (document.body.scrollTop > 3000 || document.documentElement.scrollTop > 3000) {
document.getElementById("s3").className = "bulletlist active";
document.getElementById("s0 s1 s2 s4 s5").className = "bulletlist";}
else if (document.body.scrollTop > 4000 || document.documentElement.scrollTop > 4000) {
document.getElementById("s4").className = "bulletlist active";
document.getElementById("s0 s1 s2 s3 s5").className = "bulletlist";}
else if (document.body.scrollTop > 5000 || document.documentElement.scrollTop > 5000) {
document.getElementById("s5").className = "bulletlist active";
document.getElementById("s0 s1 s2 s3 s4").className = "bulletlist";}
else {
document.getElementById("s0").className = "bulletlist active";
document.getElementById("s1 s2 s3 s4 s5").className = "bulletlist";}
}
</script>
Sicherlich ist der Code nicht professionell und man kann das bestimmt schlanker lösen, aber ich bin kein Programmierer und eigentlich funktioniert es, ... weil ...
... mit den else if stimmt etwas nicht. Ich habe jetzt schon mehrere Tuts durchgelesen, aber ich komme nicht auf den Fehler. Klammern stimmt doch auch alles !?
Kann bitte vielleicht von Euch Profis jemand mal drüberlesen? Bitte ...
Zweiter Punkt, dass beim Laden der Seite der erste Seitenpunkt (s0)nicht aktiv wird. Kann das deswegen sein, da das Script die Scroll-Position ausliest und beim Seitenladen noch nicht gescrollt worden ist? Sobald ich scrolle wird "s0" nämlich aktiv. Hm ... wie könnte man das lösen? Vielleicht "s0" gleich als aktive Klasse anlegen und dann immer nur deaktivieren (bei den anderen Positionen)?
Grüße
MrPaule
Nachtrag:
habe gerade gesehen, dass ("s0" && "s1" && "s3" && "s4" && "s5") nicht geht. Einzeln ja, aber nicht mit && verknüpft. da muss ich wohl nochmal nachlesen ... 
