javascript - 根据背景更改固定图像的颜色

Question

所以我正在开发一个具有固定 pgn Logo 的登录页面(此处为测试站点:http://kingdomhousedev.cloudaccess.host/)。因为它是白色的，而且一些背景也是白色的，所以它在这些部分上消失了。

所以我想做的是，当它位于白色或浅色部分时，将 Logo 更改为黑色。

这可以使用 javascript 和 css 实现吗？我搜索并找到了一些示例(例如:http://www.kennethcachia.com/background-check/)，但我希望它发生在滚动时而不是之后。如果可能的话，那就太好了，例如，如果只有一半的 Logo 是白色的，那么只有那部分是黑色的。

在此先感谢您的帮助!

编辑:

我被要求提供一个不是来自实时站点的示例。所以这是一个:https://jsfiddle.net/57Legkq3/9/

HTML:

<div class="black"></div>
<div class="white"></div>
<div class="black"></div>
<div class="white"></div>
<div class="black"></div>
<div class="white"></div>
<div class="logo"></div>

CSS:

.white{
  background-color:white;
  height: 400px;
}

.black{
  background-color:black;
  height: 400px;
}

.logo {
  width: 100px;
  height: 100px;
  width: 100px;
  height: 100px;
  background-color:white;
  position: fixed;
  top: 20px;
  left: 20px;
}

.white {
  background-color: white;
  height: 400px;
}

.black {
  background-color: black;
  height: 400px;
}

.logo {
  width: 100px;
  height: 100px;
  width: 100px;
  height: 100px;
  background-color: white;
  position: fixed;
  top: 20px;
  left: 20px;
}

<div class="black"></div>
<div class="white"></div>
<div class="black"></div>
<div class="white"></div>
<div class="black"></div>
<div class="white"></div>
<div class="logo"></div>

还要澄清一下。我希望白色框(代表 Logo )在经过白色区域时将颜色更改为黑色。但是我不知道白色区域在哪里。所以我需要以某种方式检查 Logo 下面的内容并根据它更改颜色，最好只检查 Logo 中白色区域上方的部分。

Answer 1

这是使用 JQuery 的基本思路。下面的代码演示了您要应用的一般原则。

$(window).scroll(function() {    
    var scroll = $(window).scrollTop();

    if (scroll >= 200) {
        $("body").addClass("blue");
    } else {
        $("body").removeClass("blue");
    }
});

请注意，在上面的代码示例中，滚动是指示窗口顶部的测量值!因此，当滚动改变时，适当的类条目被添加到，在这种情况下，body 元素。希望这会有所帮助。