0

On my site I'm currently having users click on a set of navigation links that will, onclick, highlight their backgrounds yellow.

I remember seeing a similar effect on this site at http://docs.meteor.com/

Here, when user scrolls to a specific anchor in the document, the navigation element that links to it is highlighted. How does this work? How do I begin to implement something like this on my page?

Any brief pieces of example code would be greatly appreciated. I've been working with some JavaScript for a while now and haven't been able to recreate anything.

EDIT: To clarify the effect I'm looking at on the Meteor site, when you scroll in the right column, the associated menu element on the left column changes font color to red. NOT, the on hover effect.

Brad
  • 159,648
  • 54
  • 349
  • 530
Shawn Taylor
  • 1,434
  • 5
  • 26
  • 36
  • do you mean the color yellow hover? and please provide css example so that people here will not downvote you.. – bot May 22 '13 at 01:14
  • added clarification in the EDIT – Shawn Taylor May 22 '13 at 01:16
  • Not sure why this was closed. Seems to make sense to me. I've edited the question a bit. Vote to re-open? – Brad May 22 '13 at 01:38
  • It is a possible duplicate of: "Highlight active link when using scrollto based on current view" --> http://stackoverflow.com/questions/8393442/highlight-active-link-when-using-scrollto-based-on-current-view – Giacomo Paita Apr 14 '15 at 19:12
  • Just in case, that you need a performant way, use the "intersection observer API": https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API When the user scroll an element into their viewport, highlight the corresponding link in the menu. – Steven Jan 02 '18 at 18:25

1 Answers1

2

There is ready thing for that in bootstrap called scrollspy

igor
  • 2,746
  • 3
  • 20
  • 24