How to change the color of the element depending on the section landing page?

Hello, here is the structure of the landing page:

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


Each section has a fixed element (sidebar)

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


How to do in the first section of the menu color was white and the second black?

Here is the css code:
.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;
}
March 23rd 20 at 19:01
2 answers
March 23rd 20 at 19:03
In General, it is desirable to choose some neutral color which will be visible on all sections of your landing page.
If you want to change the text color, then you need to hang up the handler on the scroll event and compare the position of the menu and sections. And depending on this to rewrite the merged text in the menu.
March 23rd 20 at 19:05
Consider the position of the page script:

Find more questions by tags JavaScriptCSS