jQuery: evidenziare la sezione corrente mentre si scrolla la pagina

Il plugin jQuery Viewport aggiunge dei selettori custom che ci permettono di selezionare gli elementi quando questi si trovano in una determinata posizione sulla pagina. Possiamo utilizzarlo per evidenziare la sezione corrente in un menu di navigazione quando si scrolla la pagina.

In jQuery non dobbiamo fare altro che intercettare l'evento scroll, selezionare l'elemento che si trova nella viewport del browser in quel momento, estrarre il suo ID e usarlo per aggiungere una classe specifica alla voce del menu con la stessa ancora:

$(function() {
  $(window).scroll(function() {
    var visible = $('section:in-viewport', '#content').attr('id');
    $('a[href="#' + visible + '"]', '#navigation').addClass('current').
    siblings('a').removeClass('current');
  });
});