• Das kreative Thema des Monats Oktober wird vor allem diejenigen unter Euch besonders ansprechen, denen Do-it-yourself quasi im Blut liegt. Zeigt uns Eure Improvisationskünste oder fotografiert, was andere Leute sich so im Alltag zusammengestrickt haben. --> Zum Mitmachen bitte hier klicken

Menulink mit underline beim Scrollen

  • Ersteller Ersteller Gelöschter User 46976
  • Erstellt am Erstellt am

Gelöschter User 46976

Gast
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
 
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:
Code: 
[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*
 
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/
 
mkr* schrieb:
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:
Code: 
[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*
Zum Vergrößern anklicken....

Hi, sicher dass das crossbrowser kompatibel ist? Hatte mit
Code: 
[COLOR=#000000]jQuery(document).scrollTop();[/COLOR]
Probleme und nutz sowas hier:

Code: 
$("body,html,document").animate({ scrollTop: $('#id').offset().top }, 400 );
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
2003-2026 Apfeltalk | Made on a Mac
Oben Unten