Questo tutorial ti insegnerà come modificare la voce di menu attiva sullo scorrimento della pagina senza utilizzare file js o plug-in speciali.

In questa demo utilizzeremo semplici funzioni jQuery per raggiungere il nostro obiettivo.

Uscita prevista:

All’evento di scorrimento della pagina, la voce di menu selezionata (attiva) verrà modificata in base alla sezione attualmente visualizzata. Accadrà anche se l’utente fa clic su uno qualsiasi dei collegamenti delle voci di menu. Questo tipo di implementazione è utile per i siti Web a pagina singola con barra dei menu fissa. Iniziamo.

Dimostrazione dal vivo

Primo passo: creare il markup

Il markup è molto semplice e facile. Creeremo una semplice barra di navigazione con poche voci di menu come abbiamo su www.instantshift.com. Ha pochi elementi come Home, Web Design, CSS, Strumenti, Tutorial ecc. La Pagina avrà vari blocchi di contenuto di testo. Ecco come appare il markup.

Il nostro markup Html è pronto ora è il momento di aggiungere un po' di stile CSS.

Fase due: aggiunta di classi CSS.

body{
      background-color:#520000;font-size:17px;
}
 
#maindiv{
      background:#F4F3E8 url(images/page_bg.webp);
}
 
#title h1 {
     text-align: right;font-weight: bold;font-size: 25px;margin: 0;color:#fff;
}
 
.container {
     width: 1000px;margin: 0 auto;padding: 38px 0;
}
 
#wrapper{
     margin:0px auto;
}
 
#sidebar {
    width:250px;float:left;
}
 
#content {
   width:720px;float:right;padding-left:12px;
}
 
#title {
   width: 900px;height: 60px;float: right;
}
 
.clear:after {
   visibility: hidden;display: block;content: "";clear: both;height: 0;
}
 
nav {
  width:213px;background-color:#030000;border: 2px solid #4F4D4D;padding:0 12px;
}
 
nav.stickydiv {
   position: fixed;top: 0;z-index: 10000;margin-top:12px;
}
 
nav ul {
list-style-type:none;margin:0;padding:0;
}
 
nav li {
padding:5px 10px;
}
 
nav li a {
color:#fff;font-weight:700;line-height: 25px;
}
 
a{
text-decoration:none;
}
 
.active {
color: #F99;text-decoration: none;
}
 
p{
font-family:Verdana,Arial,Helvetica,sans-serif;
}
 
footer p{
  color:#fff;
}

Passaggio tre: controllo del playground “jQuery”.

Prima di tutto ci assicuriamo che facendo clic sui collegamenti del menu, il corrispondente div venga fatto scorrere verso l’alto. Come puoi vedere nel codice sottostante, al clic del collegamento della voce di menu stiamo rimuovendo la classe “attiva” della voce di menu attualmente selezionata e aggiungendo la classe attiva al collegamento dell’elemento cliccato.

Quindi otteniamo l’ID dell’elemento cliccato. this.hash restituirà “#foo” che è il selettore di ID. Quindi $(this.hash) è uguale a $(“#foo”) e selezionerà l’elemento con ID foo.

$('a[href^="#"]').on('click', function (e) {
        e.preventDefault();
        $(document).off("scroll");
         
        $('a').each(function() {
            $(this).removeClass('active');
        })
        $(this).addClass('active');
         var target = this.hash,
         menu = target;
        $target = $(target);
               
       $('html, body').stop().animate({
            'scrollTop': $target.offset().top+2
        }, 600, 'swing', function() {
            window.location.hash = target;
            $(document).on("scroll", onScroll);
        });
    });

Nell’evento di scorrimento stiamo controllando la posizione degli elementi rispetto alla quantità di scorrimento, nonché la somma della loro altezza e posizione. Su questa base stiamo aggiungendo e rimuovendo la classe attiva delle voci di menu.

function onScroll(event){
    var scrollPos = $(document).scrollTop();
    $('#sidebar a').each(function () {
        var currLink = $(this);
        var refElement = $(currLink.attr("href"));
        if (refElement.position().top  scrollPos) {
            $('#sidebar ul li a').removeClass("active");
            currLink.addClass("active");
        }
        else{
            currLink.removeClass("active");
        }
    });
}

e l’ultimo evento di scorrimento della pagina stiamo controllando se la barra laterale sarà appiccicosa o meno.

$(window).scroll(function(){
        // the "12" should equal the margin-top value for nav.stickydiv
        var window_top = $(window).scrollTop() + 12;
        var div_top = $('#checkdiv').offset().top;
            if (window_top >= div_top) {
                $('nav').addClass('stickydiv');
            } else {
                $('nav').removeClass('stickydiv');
            }
 });

Ecco lo script completo.

Ecco, è facile vero? Divertiti! Non dimenticare di dare un’occhiata alla demo.

Demo dal vivo e codice sorgente

Qui puoi vedere questo menu di azione in live action. Inoltre, puoi scaricare i file sorgente in modo da poterli modificare e usarli direttamente in qualsiasi cosa tu voglia.

Demo dal vivo  Scarica il codice sorgente