Eu tenho uma página que tem âncoras que apontam para as seções apropriadas de uma página. Eu estou querendo saber se alguém tem algum conselho sobre como eu pode alternar a classe do link de âncora quando o link é clicado e também quando a janela / página rola para div apropriado usando jQuery?

Por exemplo, existem 3 links de âncora que apontam para as 3 seções:

<ul>
  <li><a href="#section1">Section 1</li>
  <li><a href="#section2">Section 2</li>
  <li><a href="#section3">Section 3</li>
</ul>

Depois, há as 3 seções:

<div id="section1"></div>
<div id="section2"></div>
<div id="section3"></div>

O que eu gostaria de realizar é quando a página rola para um dos divs ou uma âncora é clicada que a classe do link de âncora alternaria. Portanto, se a âncora #section 1 for clicada ou a página rolar para o # section1 div, uma classe será adicionada ao link da âncora section1. Se a seção 2, o link # section2 receberia a classe e o link section1 teria a classe removida e assim por diante.

Acho que posso precisar de uma maneira de rastrear o posicionamento de cada div de seção e, em seguida, alternar a classe no link apropriado, mas não tenho muita certeza de por onde começar.

Agradeço antecipadamente por qualquer ajuda ou conselho.