Highlight links on scrolling

Hi, I wonder if there a way to highlight active links on scrolling down the web page. But I need a way without jquery or vanilla(pure javascript) …thanks in advance

What do you mean by “active links”? So far I had always thought that links are “active” while they are being clicked … active while scrolling sounds contradictory to me. Maybe you could elaborate on that or post an example.

I really doubt it is possible without JavaScript. Normally is solved using Intersection Observer: https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API


This seems like you are making a single page layout. Some simple JS could do the trick, simply by checking for amount of scroll (if I can call it like that). Check out any video or article on sticky navbar and apply the same technique, just add/remove class which specifies the desired looks. This required a bit of trial and error though to get things right though.

what am looking for is a method so that when I scroll down to a specific section on my webpage ,the link in my navigation that is related to this section becomes highlighted

Ok I’ll checkout ,thanks

I see. If you meant without any JS here is something based on css :hover

Otherwise, you could try searching for “scrollspy vanilla js”