Menulink mit underline beim Scrollen

[rumsi]

Moin,

ich brauch da mal wieder eure Hilfe.
Folgender Plan: Es gibt eine einzige Webseite, eine HTML, diese soll an der oberen Seite ein feststehendes Menü haben.
Mit Klick auf einen Menülink springt die Webseite an die entsprechende Stelle. Früher wurde das mal mit Ankern gelöst.
Soweit komm ich auch noch. Was ich gerne haben möchte ist, dass wenn der User nun nicht die Links verwendet, sondern selbst an die entsprechende Stelle scrollt, er im Menü dennoch den Menülink dazu unterstreicht.

Hat jmd. einen Tipp/Lösungsvorschlag für mich?

Gracias,
Micha

 

[rumsi]

gerade durch zufall ein beispiel gefunden:
http://herrlicher.com

 

[mkr*]

Moin,

ich denke das ganze funktioniert, indem jQuery erkennt an welcher Position der Seite du bist und somit dem aktiven Punkt einen Unterstrich verpasst.

Im Quellcode habe ich das hier gefunden:

[COLOR=#000000]jQuery(document).scroll(function() {[/COLOR][COLOR=#000000]    levelScroll = jQuery(document).scrollTop();        jQuery('.starter_model').css('marginTop',-(levelScroll)+'px');    jQuery('.marke_licher').css('marginTop',760-(levelScroll/2)+'px');    jQuery('.kollektion_bg').css('marginTop',1264-(levelScroll/2)+'px');    jQuery('.videos_bg').css('marginTop',1766-(levelScroll/2)+'px');    jQuery('.finder_bg').css('marginTop',2280-(levelScroll/2)+'px');            if (levelScroll < 1400){        jQuery('.nav_marke').removeClass('active');        jQuery('.nav_kollektion').removeClass('active');        jQuery('.nav_videos').removeClass('active');        jQuery('.nav_finder').removeClass('active');            } else if (levelScroll >= 1400 && levelScroll < 2400){        jQuery('.nav_marke').addClass('active');        jQuery('.nav_kollektion').removeClass('active');        jQuery('.nav_videos').removeClass('active');        jQuery('.nav_finder').removeClass('active');                jQuery('.marke_text').fadeTo('slow', 1);        jQuery('.marke h1').fadeTo('slow', 1);
[/COLOR]
[COLOR=#000000]    } [COLOR=#AA0D91]else[/COLOR] [COLOR=#AA0D91]if[/COLOR] (levelScroll >= [COLOR=#1C00CF]2400[/COLOR] && levelScroll < [COLOR=#1C00CF]3400[/COLOR]){[/COLOR]
[COLOR=#000000]        jQuery([COLOR=#C41A16]'.nav_marke'[/COLOR]).removeClass([COLOR=#C41A16]'active'[/COLOR]);[/COLOR]
[COLOR=#000000]        jQuery([COLOR=#C41A16]'.nav_kollektion'[/COLOR]).addClass([COLOR=#C41A16]'active'[/COLOR]);[/COLOR]
[COLOR=#000000]        jQuery([COLOR=#C41A16]'.nav_videos'[/COLOR]).removeClass([COLOR=#C41A16]'active'[/COLOR]);[/COLOR]
[COLOR=#000000]        jQuery([COLOR=#C41A16]'.nav_finder'[/COLOR]).removeClass([COLOR=#C41A16]'active'[/COLOR]);[/COLOR]
[COLOR=#000000]
[/COLOR]
[COLOR=#000000]    } [COLOR=#AA0D91]else[/COLOR] [COLOR=#AA0D91]if[/COLOR] (levelScroll >= [COLOR=#1C00CF]3400[/COLOR] && levelScroll < [COLOR=#1C00CF]4400[/COLOR]){[/COLOR]
[COLOR=#000000]        jQuery([COLOR=#C41A16]'.nav_marke'[/COLOR]).removeClass([COLOR=#C41A16]'active'[/COLOR]);[/COLOR]
[COLOR=#000000]        jQuery([COLOR=#C41A16]'.nav_kollektion'[/COLOR]).removeClass([COLOR=#C41A16]'active'[/COLOR]);[/COLOR]
[COLOR=#000000]        jQuery([COLOR=#C41A16]'.nav_videos'[/COLOR]).addClass([COLOR=#C41A16]'active'[/COLOR]);[/COLOR]
[COLOR=#000000]        jQuery([COLOR=#C41A16]'.nav_finder'[/COLOR]).removeClass([COLOR=#C41A16]'active'[/COLOR]);[/COLOR]
[COLOR=#000000]        [/COLOR]
[COLOR=#000000]        jQuery([COLOR=#C41A16]'.videos'[/COLOR]).parallaxSlider();[/COLOR]
[COLOR=#000000]        [/COLOR]
[COLOR=#000000]    } [COLOR=#AA0D91]else[/COLOR] [COLOR=#AA0D91]if[/COLOR] (levelScroll >= [COLOR=#1C00CF]4400[/COLOR] && levelScroll < [COLOR=#1C00CF]4800[/COLOR]){[/COLOR]
[COLOR=#000000]        jQuery([COLOR=#C41A16]'.nav_marke'[/COLOR]).removeClass([COLOR=#C41A16]'active'[/COLOR]);[/COLOR]
[COLOR=#000000]        jQuery([COLOR=#C41A16]'.nav_kollektion'[/COLOR]).removeClass([COLOR=#C41A16]'active'[/COLOR]);[/COLOR]
[COLOR=#000000]        jQuery([COLOR=#C41A16]'.nav_videos'[/COLOR]).removeClass([COLOR=#C41A16]'active'[/COLOR]);[/COLOR]
[COLOR=#000000]        jQuery([COLOR=#C41A16]'.nav_finder'[/COLOR]).addClass([COLOR=#C41A16]'active'[/COLOR]);[/COLOR]
[COLOR=#000000]        [/COLOR]
[COLOR=#000000]    } [COLOR=#AA0D91]else[/COLOR] [COLOR=#AA0D91]if[/COLOR] (levelScroll >= [COLOR=#1C00CF]4800[/COLOR]){[/COLOR]
[COLOR=#000000]        jQuery([COLOR=#C41A16]'.nav_marke'[/COLOR]).removeClass([COLOR=#C41A16]'active'[/COLOR]);[/COLOR]
[COLOR=#000000]        jQuery([COLOR=#C41A16]'.nav_kollektion'[/COLOR]).removeClass([COLOR=#C41A16]'active'[/COLOR]);[/COLOR]
[COLOR=#000000]        jQuery([COLOR=#C41A16]'.nav_videos'[/COLOR]).removeClass([COLOR=#C41A16]'active'[/COLOR]);[/COLOR]
[COLOR=#000000]        jQuery([COLOR=#C41A16]'.nav_finder'[/COLOR]).removeClass([COLOR=#C41A16]'active'[/COLOR]);[/COLOR]
[COLOR=#000000]    }[/COLOR]
[COLOR=#000000]});[/COLOR]

Hier wird deklariert, welcher Menübereich von wo bis wo geht und welcher dementsprechend die Klasse 'active' bekommt.

Beste Grüße,
mkr*

 

[seaker]

Such mal nach der Funktion "Scrollspy". Das gibt es als Implementation für JQuery und MooTools.

Was macht das: Es "beobachtet" wo du dich auf der Seite befindest und löst dann ein entsprechendes Event aus.Mit dem Event kannst du dann wiederum diverse Sachen anstellen. Ein Beispiel wie du es suchst mit Code und erklärung dürfte das hier sein:

http://jsfiddle.net/mekwall/up4nu/

 

[__struct]

Moin,

ich denke das ganze funktioniert, indem jQuery erkennt an welcher Position der Seite du bist und somit dem aktiven Punkt einen Unterstrich verpasst.

Im Quellcode habe ich das hier gefunden:

[COLOR=#000000]jQuery(document).scroll(function() {[/COLOR][COLOR=#000000]    levelScroll = jQuery(document).scrollTop();        jQuery('.starter_model').css('marginTop',-(levelScroll)+'px');    jQuery('.marke_licher').css('marginTop',760-(levelScroll/2)+'px');    jQuery('.kollektion_bg').css('marginTop',1264-(levelScroll/2)+'px');    jQuery('.videos_bg').css('marginTop',1766-(levelScroll/2)+'px');    jQuery('.finder_bg').css('marginTop',2280-(levelScroll/2)+'px');            if (levelScroll < 1400){        jQuery('.nav_marke').removeClass('active');        jQuery('.nav_kollektion').removeClass('active');        jQuery('.nav_videos').removeClass('active');        jQuery('.nav_finder').removeClass('active');            } else if (levelScroll >= 1400 && levelScroll < 2400){        jQuery('.nav_marke').addClass('active');        jQuery('.nav_kollektion').removeClass('active');        jQuery('.nav_videos').removeClass('active');        jQuery('.nav_finder').removeClass('active');                jQuery('.marke_text').fadeTo('slow', 1);        jQuery('.marke h1').fadeTo('slow', 1);
[/COLOR]
[COLOR=#000000]    } [COLOR=#AA0D91]else[/COLOR] [COLOR=#AA0D91]if[/COLOR] (levelScroll >= [COLOR=#1C00CF]2400[/COLOR] && levelScroll < [COLOR=#1C00CF]3400[/COLOR]){[/COLOR]
[COLOR=#000000]        jQuery([COLOR=#C41A16]'.nav_marke'[/COLOR]).removeClass([COLOR=#C41A16]'active'[/COLOR]);[/COLOR]
[COLOR=#000000]        jQuery([COLOR=#C41A16]'.nav_kollektion'[/COLOR]).addClass([COLOR=#C41A16]'active'[/COLOR]);[/COLOR]
[COLOR=#000000]        jQuery([COLOR=#C41A16]'.nav_videos'[/COLOR]).removeClass([COLOR=#C41A16]'active'[/COLOR]);[/COLOR]
[COLOR=#000000]        jQuery([COLOR=#C41A16]'.nav_finder'[/COLOR]).removeClass([COLOR=#C41A16]'active'[/COLOR]);[/COLOR]
[COLOR=#000000]
[/COLOR]
[COLOR=#000000]    } [COLOR=#AA0D91]else[/COLOR] [COLOR=#AA0D91]if[/COLOR] (levelScroll >= [COLOR=#1C00CF]3400[/COLOR] && levelScroll < [COLOR=#1C00CF]4400[/COLOR]){[/COLOR]
[COLOR=#000000]        jQuery([COLOR=#C41A16]'.nav_marke'[/COLOR]).removeClass([COLOR=#C41A16]'active'[/COLOR]);[/COLOR]
[COLOR=#000000]        jQuery([COLOR=#C41A16]'.nav_kollektion'[/COLOR]).removeClass([COLOR=#C41A16]'active'[/COLOR]);[/COLOR]
[COLOR=#000000]        jQuery([COLOR=#C41A16]'.nav_videos'[/COLOR]).addClass([COLOR=#C41A16]'active'[/COLOR]);[/COLOR]
[COLOR=#000000]        jQuery([COLOR=#C41A16]'.nav_finder'[/COLOR]).removeClass([COLOR=#C41A16]'active'[/COLOR]);[/COLOR]

[COLOR=#000000]        jQuery([COLOR=#C41A16]'.videos'[/COLOR]).parallaxSlider();[/COLOR]

[COLOR=#000000]    } [COLOR=#AA0D91]else[/COLOR] [COLOR=#AA0D91]if[/COLOR] (levelScroll >= [COLOR=#1C00CF]4400[/COLOR] && levelScroll < [COLOR=#1C00CF]4800[/COLOR]){[/COLOR]
[COLOR=#000000]        jQuery([COLOR=#C41A16]'.nav_marke'[/COLOR]).removeClass([COLOR=#C41A16]'active'[/COLOR]);[/COLOR]
[COLOR=#000000]        jQuery([COLOR=#C41A16]'.nav_kollektion'[/COLOR]).removeClass([COLOR=#C41A16]'active'[/COLOR]);[/COLOR]
[COLOR=#000000]        jQuery([COLOR=#C41A16]'.nav_videos'[/COLOR]).removeClass([COLOR=#C41A16]'active'[/COLOR]);[/COLOR]
[COLOR=#000000]        jQuery([COLOR=#C41A16]'.nav_finder'[/COLOR]).addClass([COLOR=#C41A16]'active'[/COLOR]);[/COLOR]

[COLOR=#000000]    } [COLOR=#AA0D91]else[/COLOR] [COLOR=#AA0D91]if[/COLOR] (levelScroll >= [COLOR=#1C00CF]4800[/COLOR]){[/COLOR]
[COLOR=#000000]        jQuery([COLOR=#C41A16]'.nav_marke'[/COLOR]).removeClass([COLOR=#C41A16]'active'[/COLOR]);[/COLOR]
[COLOR=#000000]        jQuery([COLOR=#C41A16]'.nav_kollektion'[/COLOR]).removeClass([COLOR=#C41A16]'active'[/COLOR]);[/COLOR]
[COLOR=#000000]        jQuery([COLOR=#C41A16]'.nav_videos'[/COLOR]).removeClass([COLOR=#C41A16]'active'[/COLOR]);[/COLOR]
[COLOR=#000000]        jQuery([COLOR=#C41A16]'.nav_finder'[/COLOR]).removeClass([COLOR=#C41A16]'active'[/COLOR]);[/COLOR]
[COLOR=#000000]    }[/COLOR]
[COLOR=#000000]});[/COLOR]

Hier wird deklariert, welcher Menübereich von wo bis wo geht und welcher dementsprechend die Klasse 'active' bekommt.

Beste Grüße,
mkr*

Hi, sicher dass das crossbrowser kompatibel ist? Hatte mit

[COLOR=#000000]jQuery(document).scrollTop();[/COLOR]

Probleme und nutz sowas hier:

$("body,html,document").animate({ scrollTop: $('#id').offset().top }, 400 );

 

[jbt]

Hi,
falls du bist jetzt keine passende Lösung gefunden hast wirst du hier fündig: http://twitter.github.io/bootstrap/javascript.html#scrollspy

Ist finde ich sehr verständlich erklärt und lässt sich einfach implementieren.

Viel Erfolg
jbt