So I have a website with sections. Some of these have a light background, some a dark. They come from a CMS, so there is no way for me to know beforehand the order of those sections.
I also have an element which is fixed on the screen.
Now what I would like to do is color the fixed element white when it's over a dark background, and black when it's over a white background.
The Pen shows my approach thus far. It works pretty well, toggleActions really takes the brunt of the work. Except when there are multiple dark sections following each other. Then the second, third, ... animation aren't playing. Like the reverse of the previous section cancels out the play from the next.
So my question:
- Is this the right approach? Or is there a better way to achieve this?
- If yes, is there a fix for the issue where repeated sections stop the animation from playing?