Как сделать, чтобы цвет меню менялся в зависимости от активного раздела?

Question

[saveTibet]

Есть одностраничный сайт, у которого меню fixed. При прокрутке, разделу сайта, который находится на виду, присваивается класс .active. Разделы имеют разный фон — темный и светлый. На некоторых разделах меню плохо видно, поэтому я хочу, чтобы у него менялся цвет, когда активен нужный раздел. Можно ли написать условие для SASS, которое удовлетворяло бы этим требованиям?

Answer 1

[iBird Rose]

а sass то тут причем? тебе для каждого раздела класс нужно дать. к примеру для body. ну или для общего wrpapper, если такой имеется. и в зависимости от этих классов уже задавать для меню свой уникальный цвет.
p.s. и это ты можешь делать в том же скрипте где ты .active вешаешь на раздел. просто там же навесить на body класс этого раздела к примеру

Comments

[saveTibet]

Sass притом, что я пишу стили в нем. Тренируюсь, так сказать. Подумал, что может быть в нем можно написать условие, которое он трансформирует в CSS.

У каждого раздела есть свой класс, да. Но сути ответа я не понял.

структура примерно такая:

[riot26]

алексей: <code>код сюда</code>

[saveTibet]

<ul class="menu">
  <li class="menuitem"></li>
  <li class="menuitem"></li>
  <li class="menuitem"></li>
</ul>
<div class="wrapper">
  <section class="one"></section>
  <section class="two"></section>
  <section class="three active"></section>
</div>

[saveTibet]

riot26: точно. но как-то неочевидно. спасибо

[iBird Rose]

алексей: что не понял то в ответе? вот эти свои one two three - вешаешь на body. а потом стилизуешь body.one .menu { bg: red; } body.two .menu { bg: black; } и т.д.

[saveTibet]

iBird Rose: сайт одностраничный. body то тут причем? Вот пример такого сайта — www.alvarotrigo.com/fullPage/#secondPage

[iBird Rose]

алексей: потому что body у тебя находится выше .menu твоего. и через него ты можешь стилизовать свое меню. тобишь задавать ему цвет.

[iBird Rose]

алексей: на примере своего же присланного сайта открой devtoolls и посмотри на боди. а именно на классы fp-viewing-3rdPage, fp-viewing-4thpage и т.д. и переведи их на свой сайт. тобишь там будут one, two, three

[saveTibet]

iBird Rose: Все, понял. Я просто не думал, что при прокрутке у body меняются классы. Теперь то все предельно просто. Спасибо!

Answer 2

[Ankhena]

В JS условие в зависимости от высоты прокрутки присваивать класс light или dark (или как Вам больше нравится их называть)

Comments

[saveTibet]

Это понятно, что можно сделать через JS, но вопрос был не в этом

Answer 3

[Sergei Nazarenko]

как то так jsfiddle.net/mekwall/up4nu