Menü-highlight - nur eine Seite

[Hannes Weninger]

Hallo,

ich hab bei meiner Homepage nur eine Seite mit verschiedenen div- containern. Wenn ich oben im header auf einen Menüpunkt klicke, dann slide ich zu dem jeweiligen div.

Das funktioniert soweit bestens. Jetzt möchte ich den Menüpunkt im Header "highlighten" wenn man zu dem div gescrollt hat.

Dazu hab ich den Code gefunden (unten). Was mich bei dem Code stört ist, dass ich einen trigger brauche, da ansonsten der code im if mehrfach aufgerufen wird - das möchte ich vermeiden.
Ich hab auch nach anderen Lösungen gesucht aber keine vernünftige gefunden (einen Timer möchte ich vermeinden) und ein event (containerVisible() oder containerShown()) gibts nicht.

Weis jemand eine Lösung, wie ich das am vernünftigsten machen kann?

Vielen Dank!!
lg
Hannes

  
<script type="text/javascript">  
		$(document).ready(function() {  
			var trigger = false;  
  
			var my_div = $("#eightContainer");  
			var div_top = my_div.offset().top;  
  
			$(document).scroll(function() {  
			  
			    if (div_top <= $(document).scrollTop() && trigger === false) {  
				trigger = true;  
				alert('Hallo 8er');  
			    	}  
			    else {  
				trigger = false;  
				}  
			     });  
    		});  
	</script>  

[Gunther]

Hallo,

ich hab bei meiner Homepage nur eine Seite mit verschiedenen div- containern. Wenn ich oben im header auf einen Menüpunkt klicke, dann

... hast du doch deinen Trigger!

Ich würde also den Menüpunkten eine entsprechende 'click' Funktion mit jQuery zuweisen:

  
$("#menu a").on("click", function(){...});  

Gruß Gunther

[Hannes Weninger]

Hallo,

... hast du doch deinen Trigger!

Ich würde also den Menüpunkten eine entsprechende 'click' Funktion mit jQuery zuweisen:

$("#menu a").on("click", function(){...});

>   
>   
> Gruß Gunther  
  
  
Das "Problem" ist ja das manuelle scrollen, wenn ich manuell von oben nach unten scroll, dann sollen die Menüpunkte ja nach angezeigtem div oben gehighlightet werden.  
  
Der Header ist übrigens "fixed", also immer sichtbar.  
  
$("#menu a").on("click", function(){...}); ist schon eine gute Idee, aber ich brauch eben auch noch eine Lösung für das manuelle scrollen.  
  
Vielen Dank für Hilfe.  
lg  
Hannes

[Matthias Apsel]

Om nah hoo pez nyeetz, Hannes Weninger!

Das "Problem" ist ja das manuelle scrollen, wenn ich manuell von oben nach unten scroll, dann sollen die Menüpunkte ja nach angezeigtem div oben gehighlightet werden.

Das würde ich grundsätzlich anders machen. Bestimme die Position des entsprechenden div-Elementes und hebe den Menüpunkt dann hervor, wenn der obere Rand einen gewünschten Abstand (nach oben wie nach unten) vom oberen Rand des Viewport hat. Veranschaulichung

Matthias

[Hannes Weninger]

Danke vielmals!!
lg

[Gunther]

Hallo,

Das funktioniert soweit bestens. Jetzt möchte ich den Menüpunkt im Header "highlighten" wenn man zu dem div gescrollt hat.

Ich dachte, die Seite wird "automatisch" (per JS) bei Klick auf den Menüpunkt zu dem jeweiligen Div gescrollt?

Und wozu den Menüpunkt überhaupt highlighten?
Wenn das Menü nicht fix positioniert ist, ist die Wahrscheinlichkeit ja groß, dass man den Menüpunkt eh nicht mehr sieht.

Und was (soll) passiert (passieren), wenn der User anschließend "manuell" wieder woanders hin scrollt auf der Seite?

Ein Beispiel (ohne Highlight) dieser "Technik" findest du übrigens hier: http://happycog.com/

Gruß Gunther