Update TOC zu Kapitel wird gerade gelesen

Question

Zur Zeit habe ich eine Position: fix TOC in meiner Seitenleiste, die der Benutzer anklicken kann, um zu einem anderen zu springen (ein Name = "(1, 2,, 3, etc)") auf der Seite. Dies fügt der ausgewählten li eine Klasse von "readingReading" hinzu. Wenn der Benutzer auf eine andere li im TOC klickt, entfernt er natürlich die Klasse und fügt die Klasse der li hinzu, die der Benutzer ausgewählt hat.

Was ich hinzufügen wollte, ist folgendes: Wenn der Benutzer über den nächsten (oder vorherigen) scrollt (ein Name = ""), möchte ich, dass das Inhaltsverzeichnis mit dem aktuellen Kapitel aktualisiert wird, das der Benutzer liest. ich brauche die Klasse von „currentlyReading“ und weisen Sie diese Klasse zum li zu entfernen, die zur Zeit gelesen wird.

Irgendwelche Tipps, wie dies zu erreichen?

Answer 1

mag ich Wegpunkte für diese. Hier ist eine Ressource http://imakewebthings.com/waypoints/

Um Wegpunkt zu verwenden, würden Sie es in Ihrem einschließen App, dann rufen Sie es in Ihrem js.

Im Kopf

<script src="js/waypoints.min.js" type="text/javascript"></script> 

In Ihrem js

$('.currentlyReading').waypoint(function(event, direction) { 
    //do your trickery here e.g. 
    //$(this).toggleClass('currentlyReading'); 
    //$(this).next().toggleClass('currentlyReading'); 
    //event.stopPropagation(); 
}); 

fand ich einen Stapel Beispiel hier für das auch How to make jQuery waypoints plugin fire when an element is in view and not scrolled past?