jQuery: how to use stickyNavbar.js

How to work stickyNavbar.js plugin to stick your navigation bars to the top of the browser window during scrolling

by Michele Pisani

HTML

<div id="content">
    <div id="header" class="header">
       <nav id="nav">
           <ul class="nav navbar-nav">
               <li>
                 <a href="#home">Home</a>
               </li>
               <li>
                 <a href="#about">Chi siamo</a>
               </li>
               <li>
                 <a href="#services">Servizi</a>
               </li>
               <li>
                 <a href="#contact">Contatti</a>
               </li>
           </ul>
       </nav>
    </div>
    <div id="home" class="scrollto">
        Contenuto 'Homepage'
    </div>
    <div id="about" class="scrollto">
        Contenuto 'chi siamo'
    </div>
    <div id="services" class="scrollto">
        Contenuto 'servizi'
    </div>
    <div id="contact" class="scrollto">
        Contenuto 'contatti'
    </div>
</div>

CSS

#content {width: 100%;height: 1600px;color: #000;padding:10px}
#header {background-color:violet;float:left;width:100%}
.navbar-nav li {display: inline;list-style-type: none;padding-right: 20px;}
.active {
    color: #fff !important;
    text-decoration: underline !important;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}
#home{width: 100%;height: 400px;background-color: green;padding:20px;}
#about{width: 100%;height: 400px;background-color: blue;padding:20px}
#services{width: 100%;height: 400px;background-color: red;padding:20px}
#contact{width: 100%;height: 400px;background-color: yellow;padding:20px}
a {color:#000;text-decoration:none}

JavaScript

/*
 * stickyNavbar.js v1.0.5
 * https://github.com/jbutko/stickyNavbar.js
 * Fancy sticky navigation jQuery plugin with smart anchor links highlighting
 *
 * Developed and maintenained under MIT licence by Jozef Butko - www.jozefbutko.com
 * http://www.opensource.org/licenses/MIT

 * Original jquery-browser code Copyright 2005, 2014 jQuery Foundation, Inc. and other contributors
 * http://jquery.org/license
 *
 * CREDITS:
 * Daniel Eden for Animate.CSS:
 * http://daneden.github.io/animate.css/
 * jQuery easing plugin:
 * http://gsgd.co.uk/sandbox/jquery/easing/
 *
 * COPYRIGHT (C) 2014 Jozef Butko
 * https://github.com/jbutko
 */
/* The semi-colon before function invocation is a safety net against concatenated
   scripts and/or other plugins which may not be closed properly. */
;
(function ($, window, document) {

    'use strict';

    $.fn.stickyNavbar = function (prop) {

        // Set default values
        var options = $.extend({
            activeClass: "active", // Class to be added to highlight nav elements
            sectionSelector: "scrollto", // Class of the section that is interconnected with nav links
            navOffset: 0, // Offset from the default position of this() (nav container)
            animDuration: 550, // Duration of jQuery animation
            startAt: 0, // Stick the menu at XXXpx from the top of the this() (nav container)
            easing: "linear", // Easing type if jqueryEffects = true, use jQuery Easing plugin to extend easing types - gsgd.co.uk/sandbox/jquery/easing
            animateCSS: true, // AnimateCSS effect on/off
            animateCSSRepeat: false, // Repeat animation everytime user scrolls
            bottomAnimation: false, // CSS animation on/off in case we hit the bottom of the page
            cssAnimation: "fadeInDown", // AnimateCSS class that will be added to selector
            jqueryEffects: false, // jQuery animation on/off
            jqueryAnim: "slideDown", // jQuery animation type: fadeIn, show...