Klasse hinzufügen, um Anker-Links beim scrollen Vergangenheit Anker - div jquery

Ich habe eine Seite, die Anker, die einen link zur entsprechenden Abschnitte der Seite. Ich Frage mich, ob jemand irgendwelche Ratschläge, wie ich vielleicht wechseln die Klasse der Anker-link, wenn der link geklickt wird, und auch, wenn das Fenster/die Seite scrollt zum entsprechenden div mit jQuery?

Zum Beispiel, es gibt 3 Anker-links die Links zu den 3 Abschnitten:

<ul>
  <li><a href="#section1">Section 1</li>
  <li><a href="#section2">Section 2</li>
  <li><a href="#section3">Section 3</li>
</ul>

Dann gibt es die 3 Abschnitte:

<div id="section1"></div>
<div id="section2"></div>
<div id="section3"></div>

Was ich vollbringen möchte, ist, wenn die Seite scrollt zu einem der divs oder ein Anker geklickt wird der Klasse der Anker-link Umschalten. Also wenn die #Abschnitt 1 Anker geklickt wird oder die Seite scrollt auf der #Abs.1 div-Klasse Hinzugefügt werden, um die Abs.1 Anker-link. Wenn Teil 2, dann #section2 link erhalten würde, die Klasse und Abs.1 link hätte die Klasse entfernt und so weiter.

Kann ich denke ich brauche einen Weg, um die Positionierung jedes Abschnitts div und Umschalten der Klasse auf den entsprechenden link, aber ich bin auch nicht sicher, wo Sie anfangen sollen.

Vielen Dank im Voraus für jede Hilfe oder Beratung.

InformationsquelleAutor Phillip L. | 2012-12-13
  1. 3

    Ich würde vorschlagen, die Suche nach der gesamten Höhe der einzelnen Abschnitte. Ich bin vorausgesetzt, es gibt keine Pausen zwischen jedem Abschnitt als gut. Dann jQuery verwenden, um zu bestimmen, die position des Fensters. Wenn die position des Fensters hat einen gewissen Wert, machen die Klasse wechseln. Hoffentlich kann man nur mit scrollen, so dass, wenn Sie auf einen link klicken, es wird automatisch verschoben, und die zuvor beschriebene Funktion ausführen können, und ändern Sie die Klassen für Sie.

    Hier einige pseudo-code

    $(document).ready(function(){
    var section1Height = $('#section1').height();
    var section2Height = $('#section2').height();
    var section3Height = $('#section3').height();

    $(window).scroll(function() {
        var winTop = $(window).scrollTop();
        if(winTop >= section1Height && winTop <= section2Height){
            $('#section1').addClass("newClass").not().removeClass("newClass");
        } else if(winTop >= section2Height && winTop <= section3Height){
            $('#section2').addClass("newClass").not().removeClass("newClass");
        } else if(winTop >= section3Height){
            $('#section3').addClass("newClass").not().removeClass("newClass");
        }
    });
});

    Wieder, dies ist nur ein schnelles Beispiel. Mit mehr details auf Ihrem Teil, kann ich eine ausführlichere Antwort.

    • Vielen Dank für Euch Hilfe!!! Sie haben enorm geholfen! Eine weitere kurze Frage. Über die Höhe arbeiten würden, aber was ist, wenn zum Beispiel ich möchte ein inline-element <span> für den Abschnitt? Anstatt also von der Höhe wäre es eine Möglichkeit zu erkennen, wenn der span Schriftrollen zu sagen 40px den link-Klassen würde sich dann ändern? Ich weiß, das war nicht meine genaue Frage aber jede Beratung wäre sehr dankbar.
    • Das ist eine große Frage. Ohne weiter in Sie suchen, würde ich vorschlagen, das einwickeln der <span> in einem Div. da ein span ist in-line, ich bin mir nicht sicher, dass jQuery abholen konnte die Höhe, obwohl ich nicht sehen, warum es würde nicht. Das könnte sein, etwas Spaß zu versuchen - Nur ändern Sie Ihre html zu reflektieren, umfasst anstelle der divs, aber halten die gleichen ID ' s und es sollte immer noch versuchen zu arbeiten.
    InformationsquelleAutor ntgCleaner
Schreibe einen Kommentar