Update TOC to chapter currently being read

Question

Currently I have a position: fixed TOC in my side bar that the user can click on to jump to a different (a name="(1, 2, ,3 ,etc)") on the page. This adds a class of "currentlyReading" to the selected li.. When the user clicks another li in the TOC, it of course removes the class and adds the class to the li the user selected.

What I have been trying to add is this: when the user scrolls past the next (or previous) (a name="", I want the TOC to update with the current chapter the user is reading. That means, I need to remove the class of "currentlyReading" and assign that class to the li that is currently being read.

Any tips on how to accomplish this?

score 0 · Answer 1 · edited May 23 '17 at 12:23

I Like waypoints for this. Here is a resource http://imakewebthings.com/waypoints/

To use waypoint, you would include it in your app, then call it in your js.

In head

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

In your js

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

I found a stack example here for that also How to make jQuery waypoints plugin fire when an element is in view and not scrolled past?

Update TOC to chapter currently being read

1 Answers1