Как изменить цвет элемента в зависимости от секции лендинга?

Question

[Сергей]

Здравствуйте, вот структура лендинга:

<section class="page1">
       <div class="page_container">   
  	  </div>
    </section>
	<section class="page2">
       <div class="page_container">   
  	  </div>
    </section>

На каждой секции есть зафиксированный элемент (боковое меню)

<ul class="onepage-pagination">
<li><a data-index="1" href="#1" class=""></a></li>
<li><a data-index="2" href="#2" class="active"></a></li>
</ul>

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

Вот css код:

.onepage-pagination li a:before {
    content: '';
    position: absolute;
    width: 4px;
    height: 4px;
    background: #fff;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
}
.onepage-pagination li a.active:before {
    width: 10px;
    height: 10px;
    background: none;
    border: 1px solid #fff;
    margin-top: -4px;
    left: 8px;
}

Answer 1

[noeer]

Вообще, желательно подобрать какой-нибудь нейтральный цвет, который будет виден на всех секциях вашего лендинга.
Если же хотите менять цвет текста, то нужно вешать обработчик на событие scroll, и сравнивать положение меню и секций. И в зависимости от этого переписывать слили для текста в меню.

Answer 2

[Антон Усачев]

Считать положение страницы скриптом: