How to add class when page scroll reach at specific id?

Wappler General How To
#1

Hi, how can I add a class to an element when the scroll reaches an id?

#2

Hi @revue and welcome to our community!
Can you provide some more info please? Like for example - when should the class be added/removed, at what position of the element?

#3

I have 2 links <a href=“#section1”> and <a href=“#section2”> and 2 divs <div id = “section1”> and <div id = “section2”>.
When first div reaches the top of the page, l want to add a class to the first link and when the the second div reaches the top of the page I want to remove class from first link and add the class to the second link.

#4

Have a look at scroll spy:

https://www.w3schools.com/bootstrap/bootstrap_scrollspy.asp

Here is a template I knocked up a few weeks back that will give you an idea of how to do it…