Question

因此，我正在使用具有固定pgn徽标的登录页面（此处为测试网站：http://kingdomhousedev.cloudaccess.host/）。由于它是白色的，而某些背景也是白色的，所以在这些部分中消失了。

所以我想做的是将徽标在白色或浅色部分上更改为黑色。

可以使用javascript和CSS实现此功能吗？我已经搜索并找到了一个示例（例如：http://www.kennethcachia.com/background-check/），但我希望它可以滚动显示而不是之后显示。如果可能的话，这将是很好的，例如，如果徽标中只有一半超过白色，则该部分将为黑色。

预先感谢您的帮助！

编辑：

有人要求我提供一个不在现场的示例。所以这里是一个：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>

也要澄清。我希望白色框（代表徽标）在经过白色区域时将颜色更改为黑色。但是我不知道白色区域在哪里。因此，我需要以某种方式检查徽标下的内容，然后根据该徽标更改颜色，最好仅更改徽标中位于白色区域上方的部分。

Answer 1

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

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

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

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

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

1 个答案: