<!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>
