Change appearance when passing through Section

Question

In this code below, I can make the clicked item change the background-color, but I would like it to change without clicking, that is, when you are going through the <section> correspondent.

I know the way to make it change with a certain roll by event scrollTop, but I don’t want to set a fixed size of each roll and yes in a way that independent of the content and size of the <section> change the background-color menu item.

How to do?

$('.menu li').click(function(){
  $('.menu li').css('background-color', 'green');
  $(this).css('background-color', 'white');
})

* { margin: 0; padding: 0; }

.menu { text-align: center; position: fixed; width: 100%; }

.menu ul { list-style: none; display: inline; }

.menu li { display: inline-block; }

.menu a { text-decoration: none; color: #000; padding: 10px; display: inline-block; }

div { height: 300px; }

.blue { background-color: blue; }

.red { background-color: red; }

.orange { background-color: orange; }

.grey { background-color: grey; }

.green { background-color: green; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<nav class="menu green">
  <ul>
    <li><a href="#home">HOME</a></li>
    <li><a href="#work">WORK</a></li>
    <li><a href="#contact">CONTACT</a></li>
  </ul>
</nav>
<section id="home">
  <div class="orange"></div>
  <div class="blue"></div>
  <div class="grey"></div>
</section>
<section id="work">
  <div class="blue"></div>
  <div class="orange"></div>
  <div class="grey"></div>
  <div class="orange"></div>
  <div class="grey"></div>
</section>
<section id="contact">
  <div class="grey"></div>
  <div class="orange"></div>
  <div class="blue"></div>
  <div class="blue"></div>
  <div class="orange"></div>
  <div class="grey"></div>
</section>

Answer 1

You can use the scroll touchmove. Take an example:

$('.menu li').click(function(){
  $('.menu li').css('background-color', 'green');
  $(this).css('background-color', 'white');
})
$(window).on("scroll touchmove", function() {
if ($(document).scrollTop() >= $("#home").position().top) {
     $('.home').css('background-color', 'white');
     $('.work').css('background-color', 'green');
     $('.contact').css('background-color', 'green');
} 

if ($(document).scrollTop() >= $("#work").position().top) {
    $('.home').css('background-color', 'green');
     $('.work').css('background-color', 'white');
     $('.contact').css('background-color', 'green');
} 

if ($(document).scrollTop() >= $("#contact").position().top) {
    $('.home').css('background-color', 'green');
     $('.work').css('background-color', 'green');
     $('.contact').css('background-color', 'white');
} 
});

* { margin: 0; padding: 0; }

.menu { text-align: center; position: fixed; width: 100%; }

.menu ul { list-style: none; display: inline; }

.menu li { display: inline-block; }

.menu a { text-decoration: none; color: #000; padding: 10px; display: inline-block; }

div { height: 300px; }

.blue { background-color: blue; }

.red { background-color: red; }

.orange { background-color: orange; }

.grey { background-color: grey; }

.green { background-color: green; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="menu green">
  <ul>
    <li><a class="home" href="#home">HOME</a></li>
    <li><a  class="work" href="#work">WORK</a></li>
    <li><a  class="contact" href="#contact">CONTACT</a></li>
  </ul>
</nav>
<section id="home">
  <div class="orange"></div>
  <div class="blue"></div>
  <div class="grey"></div>
</section>
<section id="work">
  <div class="blue"></div>
  <div class="orange"></div>
  <div class="grey"></div>
  <div class="orange"></div>
  <div class="grey"></div>
</section>
<section id="contact">
  <div class="grey"></div>
  <div class="orange"></div>
  <div class="blue"></div>
  <div class="blue"></div>
  <div class="orange"></div>
  <div class="grey"></div>
</section>