How to make the menu color change depending on the active section?

Question

css

There is a one-page website with a fixed menu. When scrolling, the section of the site that is in view is assigned the .active class. Sections have a different background - dark and light. Some sections of the menu are hard to see, so I want it to change color when the desired section is active. Is it possible to write a SASS condition that satisfies these requirements?

Answer 1

what about sass? you need to give a class for each section. for example for body. well, or for a general wrpapper, if there is one. and depending on these classes, already set your own unique color for the menu.
ps and you can do this in the same script where you hang .active on the section. just hang the class of this section on the body there, for example

Answer 2

In JS, the condition, depending on the height of the scroll, is to assign the class light or dark (or whatever you like to call them)

Answer 3

something like this jsfiddle.net/mekwall/up4nu