How can I change background color for HTML section while scrolling?

Question

I have a webpage which is divided into sections and I want to change the background color for one of the sections only, on scroll once you reach that specific section and the user could see the transition, similar to this website:

blvr.com

Answer 1

You may be looking for a feature that is generally called ScrollSpy - allowing you to change the DOM when the scroll reaches a certain point.

Often, there is an "anchor element" - an element that you watch for and as soon as it appears in the viewport, you can change something (often just adding a class to that element)

Here are some links/answers that may help:

IntersectionObserver API - the newest way to do this

Change class on next element on vertical scroll

https://www.w3schools.com/howto/howto_js_scroll_indicator.asp

How to correctly use the scroll eventListener in vanilla javascript?