- This topic is empty.
Viewing 8 posts - 1 through 8 (of 8 total)
Viewing 8 posts - 1 through 8 (of 8 total)
- The forum ‘JavaScript’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
Home › Forums › JavaScript › ScrollSpy.js (Multiple Data Targets)
I’m having a problem getting scrollspy to work on a second data-target. I haven’t found a way to destroy, and I found a refresh but that doesn’t seem to do anything.
Here is my example code:
You will see the first navigation scrollspy works, but when the second navigation is enabled it is not applied. Where have I gone wrong?
I’m confused…which isn’t surprising, my JS knowledge is minimal.
What is supposed to happen?
Here’s the scenario:
User scrolls the page and see the active markers on each link (working)
User clicks “hide” and reveals a new navbar and new content (working)
User scrolls new content but active markers are not displaying on the new navbar displayed (not working)
Ok…it seems the active class is not being applied as you say.
What function drives that?
The function
$("body").scrollspy({ target: ".scrollspy" });
applies the “active” class to each li on scroll. The main point here is I am trying to change the target to:
$("body").scrollspy({ target: ".scrollspy2" });
when the new navbar/content is shown, but it seems to have no effect.
I would assume that the scrollspy function (which I assume is in the scrollspy.js file) needs looking at.
Perhaps it requires you to use a single menu not two separate ones….dunno.
The intended use of the scroll-spy is for a single menu per page, but my pages in this particular case are not separate, and for good reason. Usually these functions give a destroy or change functions but I haven’t been successful in finding one.
For anybody looking to use scrollspy.js more than once on a page, I have came up with a solution to do so. It is a little hack-ish but got it to work which is fine by me.