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

Question

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

我在this site 上找到了一个示例。您可以查看徽标和某些元素如何根据背景更改颜色。

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用于确定logo在哪个部分上方。然后它使用数组data 来确定徽标应该是什么颜色。

该函数将根据用户滚动到的部分返回真或假。 要实际更改徽标，您可以将其替换为另一个图像，或使用后面的代码更改图像颜色。 希望这会有所帮助。