Jquery Sticky Menu
What I Did!

Jquery Sticky Menu

	
	<!DOCTYPE html>
	<html>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
	<script type="text/javascript" src="jquery.easing.1.2.js" type="text/javascript"></script>
	
	
	<style>
	html,body{margin:0;padding:0;}
	#wrapper{
	  width:1000px;
	  margin:0 auto;
	  padding:0;
	}
	.content{
	  width:1000px;
	  margin:0;
	  min-height:800px;
	  height:auto;
	  padding:80px 0 0 0;
	}
	#sticky-menu {
	  background:#f2f2f2;
          background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), 
          color-stop(40%, #f2f2f2), color-stop(100%, #f2f2f2));   
          background: -moz-linear-gradient(top, #ffffff, #f2f2f2, #f2f2f2);   
         line-height: 120px;   
         text-align: center;   
         margin: 0 auto;  
         padding: 0;   
         z-index:1; } 
#sticky-menu .sub-nav {   padding: 0;   width:1000px;   margin: 0 auto;   height: 80px; } #sticky-menu ul {   float:right;   padding: 0;   width:auto;   margin: 0 auto;   height: 80px; } #sticky-menu ul li {   list-style-type: none;   display: inline;   float:left;   border-left:solid 1px #b2b2b2;   height: 80px; } #sticky-menu ul li.last-child {   border-right:solid 1px #b2b2b2; } 
#sticky-menu ul li {   display:block;   height: 80px;   background: url(images/icon-sticky-on.png) no-repeat center top;   -webkit-transition-property: color, background;   -webkit-transition-duration: 0.5s, 0.5s; } 
#sticky-menu ul li:hover , #sticky-menu ul li:active , #sticky-menu ul li.selected{   background:#f2f2f2;   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f2f2f2), color-stop(40%, #ffffff), color-stop(100%, #ffffff));   background: -moz-linear-gradient(top, #f2f2f2, #ffffff, #fffffff);   background: url(images/icon-sticky.png) no-repeat center top; } #sticky-menu ul li a{   display:block;   text-align:center;   text-decoration: none;   text-shadow: 1px 1px 1px #fff;   padding:0 30px 0 30px;   font-size:16px;   height: 80px;   width:auto;   font-size:16px; } .default {   width: 100%;   height: 80px;   border-bottom: solid 1px #b2b2b2; } .fixed {   position: fixed;   top: -5px;   left: 0;   z-index:1;   width: 100%;   border-bottom: solid 1px #b2b2b2;   box-shadow: 0 0 5px #222;   -webkit-box-shadow: 0 0 5px #222;   -moz-box-shadow: 0 0 5px #222; } </style></ul>
	
	 <div id="sticky-menu" class="default">
	  <nav class="sub-nav">
	  <ul>
	    <li><a href="#first">First</a></li>
	    <li><a href="#second">Second</a></li>
	    <li><a href="#third">Third</a></li>
	    <li><a href="#forth">Forth</a></li>
	    <li class="last-child"><a href="#top">top</a></li>
	  </ul>
	  </nav>
	 </div>
	 <div id="wrapper">
	  <section id="first" class="content"><h1>First</h1></section>
	  <section id="second" class="content"><h1>Second</h1></section>
	  <section id="third" class="content"><h1>Third</h1></section>
	  <section id="forth" class="content"><h1>Forth</h1></section>
	 </div>
	
	
	<script>
//Go Sticky

$(function() {
	var sticky_navigation_offset_top = $('#sticky-menu').offset().top;	
	var sticky_navigation = function(){
		var scroll_top = $(window).scrollTop(); 
		
		if (scroll_top > sticky_navigation_offset_top) { 
			$('#sticky-menu').css({ 'position': 'fixed', 'top':0, 'left':0 });
		} else {
			$('#sticky-menu').css({ 'position': 'relative' }); 
		}   
	};	
	sticky_navigation();
	$(window).scroll(function() {
		 sticky_navigation();
	});	
});

//scrollNav

(function($){
$.scrollNav = function(el, options){

	var base = this;
	base.$el = $(el);

	base.$el.data("scrollNav", base);

	base.win = window;
	base.$win = $(base.win);
	base.$doc = $(document);

	var scrollElement = 'html, body';
	$('html, body').each(function(){
		var initScrollTop = $(this).attr('scrollTop');
		$(this).attr('scrollTop', initScrollTop + 1);
		if ($(this).attr('scrollTop') === initScrollTop + 1) {
			scrollElement = this.nodeName.toLowerCase();
			$(this).attr('scrollTop', initScrollTop);
			return false;
		}
	});
	base.$body = $(scrollElement);

	base.init = function(){
		base.options = $.extend({},$.scrollNav.defaultOptions, options);
		base.content = $('.' + base.options.contentClass);
		base.leftMargin = parseInt( base.content.css('margin-left'), 10);
		base.rightMargin = parseInt( base.content.css('margin-right'), 10);

		if (!$.isFunction($.easing[base.options.easing[0]])) { base.options.easing = ['swing', 'swing']; }

		base.$body.bind('scroll mousedown DOMMouseScroll mousewheel keyup', function(e){
			if ( e.which > 0 || e.type === 'mousedown' || e.type === 'mousewheel' ){
				base.$body.stop();
			}
		});

		var links = base.options.selectedAppliedTo + (base.options.selectedAppliedTo === base.options.link ? '' : ' ' + base.options.link);
		base.$el.find(links)

			.add( $('.' + base.options.contentLinks) )
			.click(function(){

				var att = (this.tagName === "A") ? 'href' : base.options.targetAttr;
				base.animate($(this).attr(att));
				return false;
			});
		base.$win
			.scroll(function(){ base.findLocation(); })
			.resize(function(){ base.findLocation(); });
	};

	base.animate = function(sel){
		if (sel !== '#' && $(sel).length) { 
			var $sel = $(sel).eq(0).closest('.' + base.options.contentClass);
			base.$body.stop().animate({
				scrollLeft : Math.min( $sel.offset().left, base.$doc.width() - base.$win.width() ) - base.leftMargin,
				scrollTop  : Math.min( $sel.offset().top, base.$doc.height() - base.$win.height() )
			},{
				queue         : false,
				duration      : base.options.animationTime,
				specialEasing : {
					scrollLeft  : base.options.easing[0] || 'swing',
					scrollTop   : base.options.easing[1] || base.options.easing[0] || 'swing'
				},
				complete      : function(){
					if (base.options.useHash) { base.win.location.hash = $sel[0].id; }
				}
			});
		}
	};
	base.findLocation = function(){
		var tar, locLeft, locTop, sel, elBottom, elHeight, elWidth, elRight,
		winWidth = base.$win.width(),
		winLeft = base.$win.scrollLeft(),
		winTop = base.$win.scrollTop(),
		winRight = winLeft + winWidth,
		winBottom = winTop + base.$win.height(),
		docHeight = base.$doc.height(),
		el = base.$el.find(base.options.selectedAppliedTo).removeClass(base.options.inViewClass);
		if (base.options.fitContent) {
			base.content.width( winWidth - base.leftMargin - base.rightMargin );
		}
		base.$el.find(base.options.link).each(function(i){
			sel = $(this).attr(base.options.targetAttr);
			tar = (sel === "#" || sel.length <= 1) ? '' : $(sel);
			if (tar.length) {
				locTop = Math.ceil(tar.offset().top);
				locLeft = Math.ceil(tar.offset().left);
				elHeight = tar.outerHeight();
				elBottom = locTop + elHeight + base.options.bottomMargin;
				elWidth = tar.outerWidth();
				elRight = locLeft + elWidth;
				if ( locTop < winBottom && ( locTop + elHeight - base.options.bottomMargin > winTop || elBottom > winBottom ) &&
				locLeft < winRight && ( locLeft + elWidth - base.options.bottomMargin > winLeft || elRight > winRight ) ) {
					el.eq(i).addClass(base.options.inViewClass);
				}
			}
		});
		sel = ( winBottom + base.options.bottomMargin >= docHeight ) ? ':last' : ':first';
		el.removeClass(base.options.selectedClass);
		el.filter('.' + base.options.inViewClass + sel).addClass(base.options.selectedClass);
	};
	base.init();

	if (base.options.useHash && base.win.location.hash) {
		setTimeout(function(){
			base.animate(base.win.location.hash);
		}, base.options.animationTime/2);
	}
	base.findLocation();
};

$.scrollNav.defaultOptions = {
	link              : 'a',        
	targetAttr        : 'href',      
	selectedAppliedTo : 'li',        
	contentClass      : 'content',   
	contentLinks      : 'scrollNav', 
	useHash           : true,        
	inViewClass       : 'inView',    
	selectedClass     : 'selected',  
	bottomMargin      : 100,         
	fitContent        : false,      
	animationTime     : 1200,                
	easing            : [ 'swing', 'swing' ] 
};

$.fn.scrollNav = function(options){
	return this.each(function(){
		var nav = $(this).data('scrollNav');
		if (typeof options === "string" && /^(#|\.)/.test(options)) {
			nav.animate(options);
		}
		if (nav) { return; }
		(new $.scrollNav(this, options));
	});
};
$.fn.getvisualNav = function(){
	return this.data("scrollNav");
};

})(jQuery);
	</script>
	
	
	<script>
		$(document).ready(function(){
		 $('#sticky-menu').scrollNav();
		});
	</script>