Как менять цвет пунктов меню при скролле в зависимости от цвета фона?

Question

[butize]

Здравствуйте! У меня такая проблема: нужно менять цвет пунктов меню при скролле в зависимости от цвета блоков страницы. Например, если я сейчас скролю на белом фоне, то пункты должны быть черными и наоборот. Также необходимо учесть ситуацию, при которой часть пунктов меню находится еще на темном фоне, а часть уже на белом, соответственно они должны быть разных цветов. (показала на картинке). Я искала решение и подключала какую-то библиотеку, которая определяет цвет элемента, но так и не смогла довести это до ума( Может быть, кто то знает какой-нибудь подходящий плагин или знает сайт, на котором такой функционал реализован. Спасибо за любую помощь!

Comments

[Denioo]

Скиньте код, на jsfiddle или codepen

Answer 1

[hzzzzl]

можно попробовать поиграться с css mix-blend-mode

Comments

[butize]

ого, спасибо большое!

Answer 2

[Beliyadm]

Еще можно пойти по классике на JS autopoisk.msk.ru (при прокрутке в меню подставляется класс актив и меняется цвет ссылки), прописать у ссылок меню нужный data-color и вместо класса актив подставлять в CSS нужное значение

$(window).scroll(function(){
		var $sections = $('section');
		$sections.each(function(i,el){
		var top  = $(el).offset().top-100;
		var bottom = top +$(el).height();
		var scroll = $(window).scrollTop();
		var id = $(el).attr('id');
		if( scroll > top && scroll < bottom){
			$('a.active').removeClass('active');
			$('a[href="#'+id+'"]').addClass('active');
		}
	   })
	});

Comments

[butize]

Спасибо!