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，则可以基于最接近顶部filter的呼叫section

$(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，具体取决于用户滚动到的部分。要实际更改徽标，可以将其替换为其他图像，或使用后面的代码更改图像的颜色。希望这会有所帮助。

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

2 个答案: