NAV - Sticky Nav Bar + Scrollspy + Animation
How to work stickyNavbar.js plugin to stick your navigation bars to the top of the browser window during scrolling
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...