Come creare un menu semimobile in JQuery

Salve a tutti, oggi vorrei farvi vedere come creare un simpatico effetto di un menu mobile che si fissa in alto quando scrolliamo la pagina web che stiamo visitando. E' un effetto molto usato anche da siti molto famosi che regala un tocco di classe in più alla grafica del nostro sito. Iniziamo con il dire che per realizzarlo nel modo più semplice utilizziamo il framework JQuery in modo da essere più intuitivo possibile. Quindi iniziamo.

Per prima cosa includeremo la libreria jquery.min.js scaricabile dal sito del relativo framework. Fatto questo scriviamo una funzione come quella seguente che cambia alcune proprietà dei css, in particolare la proprietà position impostandola in fixed:

$(function() {

    var nav = $('#nav');

    var navHomeY = nav.offset().top;

    var isFixed = false;

    var $w = $(window);

    $w.scroll(function() {

        var scrollTop = $w.scrollTop();

        var shouldBeFixed = scrollTop > navHomeY;

        if (shouldBeFixed && !isFixed) {

            nav.css({

                position: 'fixed',

                top: 0,

                left: nav.offset().left,

                width: nav.width()

            });

            isFixed = true;

        }

        else if (!shouldBeFixed && isFixed)

        {

            nav.css({

                position: 'static'

            });

            isFixed = false;

        }

    });

});

Il codice è molto semplice visto che manipola solo alcune proprietà dei css quando si fa lo scroll. Il codice html di un possibile menu potrebbe essere:

<div id="nav">

      <ul>

                    <li><a href="#" class="smoothScroll">Link 1</a></li>

                    <li><a href="#" class="smoothScroll">Link 2</a></li>

                    <li><a href="#" class="smoothScroll">Link 3</a></li>

                    <li><a href="#" class="smoothScroll">Link 4</a></li>

       </ul>    

</div>

L'effetto è molto semplice e potete vedere un piccolo demo qui. Questa è solo una delle possibili implementazioni base ma se ne possono fare molte altre masticando un po' di javascript e JQuery.