Menu Active [ONE PAGE]

Bonjour,

J'aimerais avoir de l'aide concernant la réalisation de mon menu pour un site one page (scroll)
Je voudrais avoir un "active" menu lorsque l'utilisateur scroll sur la div en question.

<div id='nav'style="margin-top:10px; margin-left:1400px;">
  <ul>
     <li class='active'><a href='#home'>Home</a></li>
     <li class='has-sub '><a href='#'>Projets</a>
        <ul>
           <li class='has-sub '><a href='#'>Test</a>
              <ul>
                 <li><a href='#'>Sub Item</a></li>
                 <li><a href='#'>Sub Item</a></li>
              </ul>
           </li>
           <li class='has-sub '><a href='#'>Test 2</a>
              <ul>
                 <li><a href='#'>Sub Item</a></li>
                 <li><a href='#'>Sub Item</a></li>
              </ul>
           </li>
        </ul>
     </li>
     <li><a href='#'>About</a></li>
     <li><a href='#contact'>Contact</a></li>
  </ul>
</div>

    #nav ul li:hover > a, #nav ul li.active > a {
      background: #1b9bff;
      color: #FFF;
}
    #nav ul li.has-sub > a:after {
      content: '+';
      margin-left: 5px; 
}
    #nav ul li.last ul {
      left: auto;
      right: 0; 
}
      #nav ul li.last ul ul {
        left: auto;
        right: 99.5%;
}

Cordialement,