Verständnisproblem mit JS-Objekten, Eigenschaften und Methoden

[molily]

Hallo,

window.onscroll = function() { NavMenue.fix(); };

window.onscroll = function() { console.log(NavMenue.pos); };

  
Das ist das sogenannte [traditionelle Event-Handling](http://molily.de/js/event-handling-grundlagen.html#traditionelles-event-handling), das gibt es seit Netscape 2.0. Man registriert einen Event-Handler, indem man einer speziellen Objekteigenschaft (meist on{eventname} benannt) einen Wert zuweist. Dieser Wert ist ein Funktionsobjekt.  
  
Diese Eigenschafts-Zuweisung verhält sich wieder jede andere auch: Setzt man einen Wert, wird der alte überschrieben. Analogie:  
  
~~~javascript
window.foo = 1;  
window.foo = 2;  
alert(window.foo); // ergibt 2, nicht 1 und schon gar nicht 3 ;)

Wenn du window.onscroll setzt, so kannst du immer nur *eine* Handlerfunktion setzen.

window.onscroll = function() { NavMenue.fix(); };

Hiermit setzt du den Handler.

window.onscroll = function() { console.log(NavMenue.pos); };

Und hiermit überschreibst du ihn mit einer neuen Funktion. Es wird nur die zuletzt gesetzte Funktion function() { console.log(NavMenue.pos); } aufgerufen, nicht die erste.

Das ist ein bekannter Nachteil des traditionellen Event-Handlings.

Entweder du baust beides in eine Funktion ein:

window.onscroll = function() {  
  NavMenue.fix();  
  console.log(NavMenue.pos);  
};

Oder du verwendest das moderne, W3C-konforme Event-Handling.

window.addEventListener('scroll', function() { … Handler 1 … }, false);  
window.addEventListener('scroll', function() { … Handler 2 … }, false);  
window.addEventListener('scroll', function() { … Handler 3 … }, false);  
// ad inifinitum

Irgendwo schein ich ja nen schweren Denkfehler zu haben, aber ich komme nicht drauf.

Du hättest deine Debug-Ausgabe aktivieren können:

//console.log(this.pos);

Dann wäre dir aufgefallen, dass NavMenue.fix gar nicht aufgerufen wird. :)

Mathias