Change element color black or white depending on background color

Question

I'm setting up a new website, and I want to change logo color (that is position: fixed) depending on background color or image.

An example that I found is on this site. You can look at how the logo and some elements change color depending on background.

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>

Here is my fiddle: https://jsfiddle.net/o0gnayht/

Answer 1

by using filter:invert() you can change the logo color from black to white. If you use jquery in onscroll event you can call filter based on closest to top 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

I couldn't change the colour of the logo, but I've made a basic function to determine whether it's dark:

<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>

When the user scrolls, the scroll position window.pageYOfset is used to determine which section the logo is above. It then uses the array data to determine what colour the logo should be.

The function will return true or false depending on what section the user has scrolled to. To actually change the logo, you could replace it with an another image, or change the images colour using code behind. Hope this helps.