根据其背后的颜色更改div

Question

我正在尝试制作一个透明的粘性div，它会根据其后面的div改变颜色。因此，我有几个深色和浅色的div，而粘性div应该更改文本颜色（深色为白色，黑色为亮）。

在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>

我已经找到了部分解决方案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;
        }
    });
});

没有问题，当我的div div属性为top:50%时，它不起作用。

有人知道吗？

Answer 1

您不需要JavaScript即可执行此操作。只需使用mix-blend-mode：

#sticky {
  position: fixed;
  top: 10px;
  left: 10px;
  right: 10px;
  height: 50px;
  color: #fff;
  mix-blend-mode: exclusion;
}