On scroll add class (changing background colour)

Question

I wish to create this on scroll effect by changing the menu btns colour. Perhaps adding a class initiated on scroll hitting the element??

Each of the menu btns and divs are categorised by different IDs. Any ideas what javascript i would need to use?

Answer 1

Basic idea is simple - you have some anchors in you main html and each anchor is connected to icon (li) in menu.

When some anchor becomes visible, you 'turn off' all othe menu items, and 'turn on' connected one.

So what you have to find out - is which anchor becomes visible when user scrolls. You can use external libraries for that, i'd suggest InView library or write your one function that triggers on window scroll.

Basic construct of you code is this:

//Main listener
window.addEventListener("scroll", checkAnchors);

function checkAnchors(){
//Here you check all your anchors and find one that was invisble and became visible
    if (visibleAnchor) {

       triggerMenu(visibleAnchor);
    }
}

function triggerMenu(visibleAnchor) {
    //turn off all menu's lis and turn on the one connected to visibleAnchor
}