0

I'm trying to make a sticky, transparent div, that changes color based on the div behind it. So, I've got a couple of dark and light div's, and the sticky div should change text-color (white on the dark, black on the light).

enter image description here

In HTML

<div id="sticky">Menu</div>
<div class="content light"></div>
<div class="content dark"></div>
<div class="content light"></div>
<div class="content dark"></div>
<div class="content light"></div>

I've already found a partial solution here:

var stickyOffset = $("#sticky").offset();
var $contentDivs = $(".content");
$(document).scroll(function() {
    $contentDivs.each(function(k) {
        var _thisOffset = $(this).offset();
        var _actPosition = _thisOffset.top - $(window).scrollTop();
        if (_actPosition < stickyOffset.top && _actPosition + $(this).height() > 0) {
            $("#current").html("Current div under sticky is: " + $(this).attr("class"));
            $("#sticky").removeClass("light dark").addClass($(this).hasClass("light") ? "light" : "dark");
            return false;
        }
    });
});

No the problem is, that when my stikcy div get's property top:50%, it doesn't work.

Anyone got a solution?

kabooya
  • 447
  • 3
  • 14

1 Answers1

1

You don't need JavaScript to do this. Just use mix-blend-mode:

#sticky {
  position: fixed;
  top: 10px;
  left: 10px;
  right: 10px;
  height: 50px;
  color: #fff;
  mix-blend-mode: exclusion;
}
Steve
  • 8,066
  • 11
  • 70
  • 112
  • Thanks. Worked! Did have to add ```background-color: white``` to the light parts in order to work. – kabooya Aug 09 '20 at 07:04