How to give an HTML element dynamic background color based on color-wheel contrast?

JavaScript
1

I have a sticky (scrolling-follow) HTML element with a Blue background and my problem is that each time I scroll down on other elements with a Blue background as well, this element is being “swallowed” by these other elements.

How to solve that problem?
For example, how to give an HTML element dynamic background color based on color-wheel contrast?
I really try to avoid an XY problem here, so I am of course open for more solutions to this problem.

2

Try a contrasting yellow border, a few pixels wide, around your sticky element.

2 Likes
3

Box shadow is also useful for giving some depth to the sticky element and separating it from the background.

2 Likes