根据背景颜色更改元素颜色黑色或白色

Question

我正在建立一个新的网站，我想根据背景颜色或图像更改徽标颜色（即position: fixed ）。

我发现的一个例子是在这个网站上 。 您可以查看徽标和某些元素如何根据背景改变颜色。

 body { margin: 0; } .logo img { position: fixed; width: 100px; } .black { background: black; width: 100%; height: 400px; } .yellow { background: yellow; width: 100%; height: 400px; } .red { background: red; width: 100%; height: 400px; } .imageBg { background: url(https://images.pexels.com/photos/2208895/pexels-photo-2208895.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260); width: 100%; height: 400px; background-size: cover; } 

 <div class="logo"> <img src="http://www.clker.com/cliparts/n/y/a/M/G/h/fdl-logo.svg"> </div> <!-- change logo color to: black --> <section class="yellow"></section> <!-- change logo color to: white --> <section class="black"></section> <!-- change logo color to: white --> <section class="red"></section> <!-- change logo color to: black --> <section class="yellow"></section> <!-- change logo color to: white --> <section class="imageBg"></section> 

这是我的小提琴： https ： //jsfiddle.net/o0gnayht/

Answer 1

通过使用filter:invert()您可以将徽标颜色从黑色更改为白色。 如果在onscroll事件中使用jquery，则可以根据最接近顶部的section调用filter

 $(window).scroll(function () { var windowTop = Math.max($('body').scrollTop(), $('html').scrollTop()); $('section').each(function (index) { if (windowTop > ($(this).position().top - 100)) { if ($(this).hasClass('yellow')) { $('.logo img').css('filter', 'invert(0)'); } else { $('.logo img').css('filter', 'invert(1)'); } } }); }).scroll(); 

 body { margin: 0; } .logo img { position: fixed; width: 100px; } .black { background: black; width: 100%; height: 400px; } .yellow { background: yellow; width: 100%; height: 400px; } .red { background: red; width: 100%; height: 400px; } .imageBg { background: url(https://images.pexels.com/photos/2208895/pexels-photo-2208895.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260); width: 100%; height: 400px; background-size: cover; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="logo"> <img src="http://www.clker.com/cliparts/n/y/a/M/G/h/fdl-logo.svg"> </div> <!-- change logo color to: black --> <section class="yellow"></section> <!-- change logo color to: white --> <section class="black"></section> <!-- change logo color to: white --> <section class="red"></section> <!-- change logo color to: black --> <section class="yellow"></section> <!-- change logo color to: white --> <section class="imageBg"></section> 

Answer 2

我无法改变徽标的颜色，但我已经做了一个基本功能来确定它是否暗：

<script>
  var data = [false, true, true, false, true];

  function isDark() {
    var scrollPos = window.pageYOffset;
    var n = Math.floor((scrollPos + 50) / 400);
    console.log(data[n]);
    return data[n];
  }
</script>

当用户滚动时，滚动位置window.pageYOfset用于确定徽标在哪个部分上方。 然后，它使用数组data来确定徽标应该是什么颜色。

该函数将返回true或false，具体取决于用户滚动到的部分。 要实际更改徽标，您可以将其替换为另一个图像，或使用后面的代码更改图像颜色。 希望这可以帮助。