Hallo miteinander!

Nachdem ich unter tätiger Mithilfe von einigen von euch (insbesondere RIDER sei nochmals lobend erwähnt) es nun geschaft habe, meine Mega-Menüs sowohl grafisch ansprechend als auch funktional zu gestalten, stehe ich nun vor einem neuen Problem, das aus meiner bescheidenen Sicht heraus noch weitaus kniffliger zu lösen erscheint.

(Vorab schonmal Sorry für den Megapost!)

Da meine Menüs trotz aller Bemühungen um inhaltliche Eingrenzung, aufgrund des zu behandelnden Sujets, doch extrem ausufernd sind, erscheint es mir aus Gründen der Zweckmäßigkeit geboten, eine gewisse Benutzer-bezogene Dynamik hinsichtlich des Ladens von Menüeinträgen und dem Hinzufügen bzw. Entfernen von Event Listenern zu implementieren, was meine Fähigkeiten jedoch vor eine (zu) harte Probe stellt!

Nehmen wir einmal folgendes Beispielmenü:

________________________
|                        |
|           /\           |<----- <div> Button 'hoch' (function Rahmen'innen'.scrollTop - 'x' )
|          /__\          |

Vom äußeren Rahmen mittels overflow:hidden verdeckt, ist für den Betrachter immer nur ein im Vergleich zur gesamten Länge des Menüs verschwindend geringer Teil der Menüelemente zu sehen, das heißt eigentlich würde das ganze (nicht maßstabsgetreu) etwa so aussehen:

_______________                                                              ____________
|_______________|                                                            |------------|
| |-----------| |  Oder, je nachdem, wie weit das Menü gescrollt ist -->     |------------|
| |-----------| |                                                           _|------------|_
| |-----------| |  Da, soweit ich das verstanden habe, die Funktion von    |_|------------|_|
| |-----------| |  Event Listenern ist, in kurzen Intervallen den Status   | |------------| |
|_|-----------|_|  ihres Ziel-Elements zu überprüfen, dürfte klar sein,    | |------------| |
|_|-----------|_|  das bei vielen Duzend Menü-Elementen, das Laufen der    | |------------| |
  |-----------|    dazugehörigen Event Listener nicht gerade speicher-     | |------------| |
  |-----------|    schonend ist, von den Elementen selbst, die ja nicht    |_|------------|_|
  |-----------|    wirklich nonexistent im Sinne von 'display:none'        |_|------------|_|
  |-----------|    sind, sondern ja lediglich unsichtbar sind, im Sinne      |------------|
  |-----------|    von 'visibility:hidden', ganz zu schweigen!               |------------|
  |___________|                                                              |____________|

Die Frage, die ich mir nun stelle ist, ob es nicht möglich ist, einen Bereich außerhalb der Menübox zu definieren, also gewissermaßen eine Grenze, ab der beim scrollen die Menüelemente auf 'display:none' bzw. 'display:block' gesetzt werden und die zu dem jeweiligen Element dazugehörenden EventListener hinzugefügt bzw. wieder entfernt werden, eben abhängig vom 'Status' des Scrollens.

Soweit ich das mitbekommen habe, soll sich über 'element.scrollTop' ja nicht nur ein Wert festlegen lassen, sondern es sollte damit doch auch möglich sein, den Status zu ermitteln, wie weit das entsprechende Element (also das Eltern-Element der Menüpunkte, der 'innere' Rahmen) gescrollt ist.

Im Prinzip müsste es doch also eigentlich möglich sein, eine solche Funktion zusammenzubasteln.
Wie das aber zu bewerkstelligen wäre, entzieht sich leider meiner Kenntnis...

Ich bin wie immer dankbar für jede Hilfe!

Beste Grüße,

Roadster.