根据其背后的颜色更改 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;
        }
    });
});

没有问题，当我的 stikcy 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;
}