Как изменить цвет svg изображения при прокрутке страниц плагином fullPage.js?

Question

[Даниил]

Добрый день!
Есть страница из 4х секций, у каждой секции свой цвет (зеленый, оранжевый, красный, синий).
Слева зафиксирована кнопка при нажатии на которую раскрывается меню.
Сейчас по умолчанию зеленый fill="#83c038", как сделать чтобы при прокрутке, в зависимости от секции менялся fill svg изображения?
Предполагаю что по id секции менять цвет $('#path1').css({ fill: "red" });
К сожалению мои знания js ближе к 0.

Answer 1

[Александр]

$('.button-catalog>svg>path').css( 'fill', 'red' );
// или
$('.button-catalog>svg>path').css({ fill: "red" });

Comments

[Даниил]

<!--4 секции и у каждой свой цвет-->
<div class="first-page" id="fullpage">
	<div class="sect-1" style="background-color: red;"></div>
	<div class="sect-2" style="background-color: green;"></div>
	<div class="sect-3" style="background-color: blue;"></div>
	<div class="sect-4" style="background-color: blue;"></div>	
</div>	
<!---Нужно чтобы цвет кнопки менялся на цвет секции, когда переходишь на эту секцию -->
<div class="button-catalog">
	<svg width="138px" height="386px" viewBox="0 0 138 386" version="1.1" xmlns="http://www.w3.org/2000/svg">
	<path id="path1" fill="#83c038" opacity="1.00" d=" M 0.00 0.63 C 8.09 32.40 31.44 58.43 59.23 74.85 C 77.59 85.34 94.67 98.44 108.22 114.76 C 125.60 135.35 136.81 161.40 138.00 188.45 L 138.00 197.59 C 136.90 224.64 125.73 250.72 108.41 271.34 C 95.00 287.51 78.19 300.58 60.02 310.99 C 31.89 327.39 8.27 353.56 0.00 385.57 L 0.00 0.63 Z" />
	</g>
	</svg>
</div>

[Александр]

Даниил,

$('.button-catalog>svg>path').css( 'fill', 'red' );

У меня такое работает

[Даниил]

Александр, А когда перехожу в секцию с синим цветом, цвет настроения не синий, а кнопка остается красной.

[Александр]

Даниил, Какой еще цвет настроения?
Как работают секции? Как они переключаются, скинь код

[Даниил]

smartt.ru.xsph.ru при переходе с первой секции нужно чтобы кнопка слева меняла цвет на оранжевый. Когда переходишь в 3ю секцию, кнопка меняет цвет на красный. Когда переходишь на 4ю секцию, кнопка меняет цвет на синюю

[Александр]

Даниил, Попробуй это засунуть куда нибудь в скрипт и скажи, при смене секции выводит в консоль "class changed"

jQuery('.section ').bind('classChanged', function(){		console.log('class changed');	});

[Даниил]

Ни чего у меня не выводит((

[Александр]

Даниил, Во общем тебе нужно отследить смену класса active у секций, при смене получить номер секции, после этого прописать условия и в них изменять цвета. Я без доступа ко всему коду ничего сделать не могу. А тебе без js в сайтостроении не справиться

[Даниил]

Александр, Я изучаю JS, но грубо говоря только начал. Я понимаю что надо сделать что вы говорите, но сделать на практике не получается(