jQuery ändert css bei der Navigation, wenn div # in die Ansicht scrollt

7

Ich möchte den auf dieser Seite verwendeten Effekt neu erstellen: Ссылка

Die Website verwendet eine große Seite, die nach unten scrollt. Wenn Sie nach unten scrollen und verschiedene Abschnitte passieren, ändert die Menüführung auf der linken Seite die css-Klasse in "current", wenn das entsprechende div angezeigt wird.

Ich nehme an, dass dies mit jQuery mit $ (window) .height ();

geschehen kann

Ich bin ziemlich neu bei jQuery und was ich schreiben möchte, ist etwas ähnliches (im Sinne von Laien):

  • Höhe des Browserfensters erhalten - Wenn div # content1 100px von oben und / oder 200px vom unteren Änderungsmenü ist, wird #link1 zu '.current' - sonst entferne .current aus allen menü a links

... und wiederhole es für 4 verschiedene divs.

Kann mir jemand in die richtige Richtung zeigen ..? Danke.

    
Mr Jonny Wood 24.05.2010, 12:14
quelle

3 Antworten

24

Ich habe mir das Code-Beispiel nicht angesehen (es macht mehr Spaß, mich selbst herauszufordern: P), aber so würde ich es machen - Demo hier .

Ich habe die Position jedes Elementblocks gespeichert, um die Anzahl der DOM-Aufrufe zu minimieren, und habe dann das Array durchsucht. Um Ihnen zu helfen, einige der Variablen zu verstehen.

%Vor%

Skript:

%Vor%     
Mottie 24.05.2010, 15:31
quelle
0

Sie können $(window).scrollTop(); verwenden, um zu wissen, wie weit Sie von ganz oben entfernt sind.

JS:

%Vor%

CSS:

%Vor%

HTML:

%Vor%     
SteD 24.05.2010 13:50
quelle
0

Schön, danke, das hat mir geholfen, die Beziehungen zwischen den Fenstern der Links zu verstehen, aber ich wollte keine bestimmten Pixelhöhen verwenden, sondern stattdessen die Divs, die den Inhalt für jeden Link enthalten. Die ursprüngliche Website, die ich zeigte, verwendet Folgendes:

%Vor%

Nun, das ist nur ein Teil des Codes und es kontrolliert auch das Logo, das auf der rechten Seite erscheint, aber der Teil, der mich interessiert (und verwirrt) ist die Variablen scrollposition und sectionheight , die es dem Menü ermöglichen muss, die Klasse zu ändern, abhängig davon, ob der Abschnitt angezeigt wird oder nicht.

    
Mr Jonny Wood 24.05.2010 15:11
quelle

Tags und Links