Ciao, oggi voglio mostrarvi come creare una barra laterale di menu a scorrimento (scroll) con l'utilizzo della libreria jQuery. Vi sarà capitato diversse volte durante la navigazione di pagine molto lunghe di perdervi senza ritrovare più la sidebar per cambiare pagina, questa tecnica l'ho trovata molto utile anche per il mio sito, vediamo come funziona:

  1. Scarichiamo la libreria javascript jQuery, inseriamo il collegamento nel tag head alla cartella del vostro sito dove verranno inseriti i file javascript.
  2. Inseriamo il coice javascript sempre dentro il tag head per far funzionare la scroll sidebar animata es:

 
<head>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

<script type="text/javascript">

        $(function() {
            var offset = $("#sidebar").offset();
            var topPadding = 15;
            $(window).scroll(function() {
                if ($(window).scrollTop() > offset.top) {
                    $("#sidebar").stop().animate({
                        marginTop: $(window).scrollTop() - offset.top + topPadding
                    });
                } else {
                    $("#sidebar").stop().animate({
                        marginTop: 10
                    });
                };
            });
        });
    </script>

 </head>

 

Per maggiori dettagli e approfondimenti consultare il sito web dell'autore del tutorial che troverete in basso. Ciao, grazie.

 

 

 

Luca Sanna

grafico creativo, web designer, web developer.


Blog tag:
Javascript, Web design