page-icon | Find the best icon for a web page | Icon library

I currently have a checkbox. I want to implement a method as described below~

When the user clicks on the checkbox and it turns into a red background state, this action can be stored in a cookie using javascript. When the web page is refreshed, the red background state is still Exist, how can I write it to achieve it?

I'm building a blazor application where I should keep java script code to minimal. So I'm using only bootstrap css in my parallax page. I have made scroll spy like behavior work with window.onscroll since it cannot be done with c# as of now; but it gives poor performance.

After googling, I recently came across IntersectionObserver API. so I thought of making my existing window.onscroll logic to work with IntersectionObserver API. However I'm not able to achieve it.

Here is what I'm trying to do. In my parallax page with fixed top nav bar and I would like to apply active css class to a.nav-items when the user scroll reaches the respective section he wants to view.

Here is the HTML: