Как стилизовать SVG через CSS?

Алексей Кауль: Было бы прекрасно, но как?

<![CDATA[
    .fil {fill:white}
    .black > .fil {fill:black;}
]]>Такая конструкция тоже не помогает.
Может, как-то по другому надо?

Как стилизовать SVG через CSS?

Но, как я понял, это невозможно.

Как стилизовать SVG через CSS?

Про это уже написали выше. Меня интересует стилизация именно background-image svg.

Как стилизовать SVG через CSS?

Алексей Тен: Жаль. (

Как поменять класс у body при прокрутке к определенному элементу?

Виталий Инчин ☢: Вообще супер. Спасибо большое.

Как поменять класс у body при прокрутке к определенному элементу?

Виталий Инчин ☢: Да, прекрасно. Спасибо.
Если позволите, еще тогда маленький нюансик. Можно как-то указать отступ сверху? То есть, чтобы класс добавлялся, когда блок еще не доехал до верха пикселей 10, например.

Как поменять класс у body при прокрутке к определенному элементу?

А можно в последнем примере сделать так, чтобы изменения происходили при касании блока верхнего края окна, а не при появлении снизу?

Как поменять класс у body при прокрутке к определенному элементу?

ОК. Спасибо.

Как поменять класс у body при прокрутке к определенному элементу?

Andrew: Вроде сделал, работает.
Но не ручаюсь за правильность и оптимальность. Может можно, как то уменьшить код:

$(window).on('scroll', function(){
    if($(window).scrollTop() >= $('.article-content').offset().top){
      $('#page-header').removeClass("transparent").addClass("opacity");
    } else if ($(window).scrollTop() <= $('.article-content').offset().top){
		$('#page-header').removeClass("opacity").addClass("transparent");
	}
  });

Как поменять класс у body при прокрутке к определенному элементу?

Andrew: А если без body обойтись? Просто второй пример изменить так, чтобы реагировал (менял transparent на opacity) не в зависимости от процентов прокрутки, а при достижении определенного блока.

Как поменять класс у body при прокрутке к определенному элементу?

Andrew: А, точно. А можно, как-то сделать первый вариант на основе второго примера?

Как поменять класс у body при прокрутке к определенному элементу?

Там такой скрипт:

$(window).scroll(function() {
	var $header = $("#page-header");
	var windowHeight = $(window).height();
	var percent = 77;
	if ($(window).scrollTop() > (windowHeight / 100 * percent) && $header.hasClass("transparent")) {
		$header.removeClass("transparent").addClass("opacity");
	} else if ($(window).scrollTop() <= (windowHeight / 100 * percent) && $header.hasClass("opacity")) {
		$header.removeClass("opacity").addClass("transparent");
	}
}); //scroll

Но он под проценты заточен.

Как поменять класс у body при прокрутке к определенному элементу?

Andrew: Но ведь во втором примере все нормально работает.

Как поменять класс у body при прокрутке к определенному элементу?

Эффект должен быть, как здесь: novi.co/test/page2
Но здесь идет привязка к процентам от прокрутки страницы, а нужна привязка к определенному блоку.

Как поменять класс у body при прокрутке к определенному элементу?

Странно. Код работает, но почему-то не так, как надо. Пример: novi.co/test/page
Там при прокрутке к белому фону (т. е. к основному контенту статьи) иконка-гамбургер должна окрашиваться в черный цвет. Вместо этого происходит вызов меню, хотя оно должно вызываться только при нажатии.

Как сделать .scrollTop() в процентах?

kapuletti: Да точно. Спасибо! А я думал, как через .innerHeight() надо делать...

Как сделать .scrollTop() в процентах?

kapuletti: Да, пример работает. Но не совсем так. Сейчас просчитывается высота всего документа, а я имел в виду высоту видимой части окна (проще говоря, вьюпорт).

Как сделать .scrollTop() в процентах?

kapuletti: К сожалению, в таком виде не работает:

$(document).ready(function() {
	var $header = $("#page-header");

	$(window).scroll(function() {
		var documentHeight = $(document).height();
		var percent = 82;
		if ($(this).scrollTop() > (documentHeight/100*percent) && $header.hasClass("transparent")) {
			$header.removeClass("transparent").addClass("opacity");
		} else if ($(this).scrollTop() <= (documentHeight/100*percent) && $header.hasClass("opacity")) {
			$header.removeClass("opacity").addClass("transparent");
		}
	}); //scroll
});

Как сделать .scrollTop() в процентах?

Спасибо. Просто я не специалист... Применительно к вышеприведенному скрипту, как это должно выглядеть?

Как при нажатии на элемент добавлять и удалять class у body?

Виталий Инчин ☢: Да, действительно все работает. Это я просто не так понял. Просто там класс удаляется, но само class="" остается.