Question

我有一个带图标和文字的固定按钮。当您滚动剖面时，背景是黑暗和明亮的。我需要一个可以应用于多个部分的类，因此该按钮将改变文本和图标的颜色。我可以使用以下代码使其工作一次，但我无法仅将其应用于该部分，并在再次出现时重新应用。

 $(document).scroll(function(){
    if($(this).scrollTop() >= $('.darken').offset().top - 0) {
        $("#editor-masthead").addClass("go-dark");
    } else {
        $("#editor-masthead").removeClass("go-dark");
    }
});

Answer 1

我保留了脚本，因为第一部分的背景具有透明度，推荐的CSS对按钮应用了相同级别的不透明度。之后，这一行代码完成了剩下的工作。很酷！

再次感谢@chazsolo！

mix-blend-mode: difference;

Answer 2

您可能需要查看mix-blend-mode。如果您可以使用此功能，请尝试更改TAdsQuery与mix-blend-mode和background属性配对，以获得所需的结果。

注意：Browser support非常糟糕，因此您可能希望为不受支持的浏览器提供备用。

＆＃13;

color

＆＃13;

*,
*:before,
*:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

section {
  height: 100vh;
  background: blue;
}

section:nth-child(2n) {
  background: #e2ffe3;
}

button {
  position: fixed;
  top: 20px;
  left: 40px;
  cursor: pointer;
  background-color: #666;
  border: none;
  padding: 6px 17px;
  font-size: 12px;
  color: white;
  mix-blend-mode: difference;
}

＆＃13;

fixed元素改变某些div类的颜色

2 个答案: