Skip to main content Skip to secondary navigation Accessibility Feedback

Gumshoe: A framework-free scrollspy script

Last week I release Gumshoe, a lightweight, framework-free script that highlights the current content in the navigation area on single-page sites.

I used a few tricks in Gumshoe to make it more performant:

  1. Navigation links and their associated content are stored in an array when the script is initialized. This means that the script doesn’t have to search the DOM for them on scroll.
  2. I also stored all measurements—things like how tall the document is and how far from the top sections are—to variables on initialization so the script doesn’t need to do as many calculations on the fly.
  3. Like all of my scripts that use scroll and resize events, I’ve added an event throttler to prevent methods from being called an absurd number of times during the course of an event.

Download Gumshoe (and check out the source code) on GitHub.

  • More articles on...
  • Code

Have any questions or comments about this post? Email me at chris@gomakethings.com or contact me on Twitter at @ChrisFerdinandi.

Get the Weekly Digest