以下是 Waypoints顶部导航栏特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>jQuery Waypoints粘性顶部导航栏</title>
<!--Mobile specific meta goodness :)-->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!--css-->
<link rel="stylesheet" href="styles.css">
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Favicons-->
<link rel="shortcut icon" href="img/favicon.ico">
</head>
<body id="home">
<div class="wrapper">
<header>
<h1>Mars</h1>
</header>
<div class="nav-container">
<nav>
<ul>
<li><a href="#chapter-1" class="selected">Chapter I</a></li>
<li><a href="#chapter-2">Chapter II</a></li>
<li><a href="#chapter-3">Chapter III</a></li>
<li><a href="#chapter-4">Chapter IV</a></li>
<li><a href="#chapter-5">Chapter V</a></li>
</ul>
<div class="nav-left"></div>
<div class="nav-right"></div>
<div class="nav-above"></div>
</nav>
</div>
<section id="chapter-1">
<img src="img/dino.jpg" alt="#" />
<div class="column left">
<h3>Chapter I</h3>
<p>You don't know about me without you have read a book by the
name of The Adventures of Tom Sawyer; but that ain't no matter.
That book was made by Mr. Mark Twain, and he told the truth,
mainly. There was things which he stretched, but mainly he told
the truth. That is nothing. I never seen anybody but lied one
time or another, without it was Aunt Polly, or the widow, or
maybe Mary. Aunt Polly—Tom's Aunt Polly, she is—and Mary, and
the Widow Douglas is all told about in that book, which is
mostly a true book, with some stretchers, as I said before.</p>
</div><!--end column-->
<div class="column right">
<p>Now the way that the book winds up is this: Tom and me found
the money that the robbers hid in the cave, and it made us rich.
We got six thousand dollars apiece鈥攁ll gold. It was an awful
sight of money when it was piled up. Well, Judge Thatcher he
took it and put it out at interest, and it fetched us a dollar a
day apiece all the year round鈥攎ore than a body could tell what
to do with. The Widow Douglas she took me for her son, and
allowed she would sivilize me; but it was rough living in the
house all the time, considering how dismal regular and decent
the widow was in all her ways; and so when I couldn't stand it
no longer I lit out.</p>
</div><!--end column-->
<hr />
</section>
<section id="chapter-2">
<img src="img/dino.jpg" alt="#" />
<div class="column left">
<p>I got into my old rags and my sugar-hogshead again, and was
free and satisfied. But Tom Sawyer he hunted me up and said he
was going to start a band of robbers, and I might join if I
would go back to the widow and be respectable. So I went back.</p>
<p>The widow she cried over me, and called me a poor lost lamb,
and she called me a lot of other names, too, but she never meant
no harm by it. She put me in them new clothes again, and I
couldn't do nothing but sweat and sweat, and feel all cramped
up. Well, then, the old thing commenced again. The widow rung a
bell for supper, and you had to come to time. </p>
</div><!--end column-->
<div class="column right">
<p>When you got to the table you couldn't go right to eating,
but you had to wait for the widow to tuck down her head and
grumble a little over the victuals, though there warn't really
anything the matter with them,鈥攖hat is, nothing only everything
was cooked by itself. In a barrel of odds and ends it is
different; things get mixed up, and the juice kind of swaps
around, and the things go better.</p>
<p>After supper she got out her book and learned me about Moses
and the Bulrushers, and I was in a sweat to find out all about
him; but by and by she let it out that Moses had been dead a
considerable long time; so then I didn't care no more about him,
because I don't take no stock in dead people.</p>
</div><!--end column-->
<hr />
</section>
<section id="chapter-3">
<img src="img/dino.jpg" alt="#" />
<div class="column left">
<p>Pretty soon I wanted to smoke, and asked the widow to let me.
But she wouldn't. She said it was a mean practice and wasn't
clean, and I must try to not do it any more. That is just the
way with some people. They get down on a thing when they don't
know nothing about it. Here she was a-bothering about Moses,
which was no kin to her, and no use to anybody, being gone, you
see, yet finding a power of fault with me for doing a thing that
had some good in it. And she took snuff, too; of course that was
all right, because she done it herself.</p>
</div><!--end column-->
<div class="column right">
<p>Her sister, Miss Watson, a tolerable slim old maid, with
goggles on, had just come to live with her, and took a set at me
now with a spelling-book. She worked me middling hard for about
an hour, and then the widow made her ease up. I couldn't stood
it much longer. Then for an hour it was deadly dull, and I was
fidgety. Miss Watson would say, "Don't put your feet up there,
Huckleberry;" and "Don't scrunch up like that, Huckleberry鈥攕et
up straight;" and pretty soon she would say, "Don't gap and
stretch like that, Huckleberry鈥攚hy don't you try to behave?"</p>
</div><!--end column-->
<hr />
</section>
<section id="chapter-4">
<img src="img/dino.jpg" alt="#" />
<div class="column left">
<p>Then she told me all about the bad place, and I said I wished
I was there. She got mad then, but I didn't mean no harm. All I
wanted was to go somewheres; all I wanted was a change, I warn't
particular. She said it was wicked to say what I said; said she
wouldn't say it for the whole world; she was going to live so as
to go to the good place. Well, I couldn't see no advantage in
going where she was going, so I made up my mind I wouldn't try
for it. But I never said so, because it would only make trouble,
and wouldn't do no good.</p>
</div><!--end column-->
<hr />
</section>
<section id="chapter-5">
<img src="img/dino.jpg" alt="#" />
<div class="column left">
<p>Then she told me all about the bad place, and I said I wished
I was there. She got mad then, but I didn't mean no harm. All I
wanted was to go somewheres; all I wanted was a change, I warn't
particular. She said it was wicked to say what I said; said she
wouldn't say it for the whole world; she was going to live so as
to go to the good place. Well, I couldn't see no advantage in
going where she was going, so I made up my mind I wouldn't try
for it. But I never said so, because it would only make trouble,
and wouldn't do no good.</p>
</div><!--end column-->
<hr />
</section>
</div>
<script src="js/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="js/jquery.scrollTo-1.4.2-min.js" type="text/javascript"></script>
<script src="js/waypoints.min.js" type="text/javascript"></script>
<script src="js/navbar2.js" type="text/javascript"></script>
</body>
</html>
JS代码(navbar2.js):
$(function(){
// Do our DOM lookups beforehandvar nav_container = $(".nav-container");
var nav = $("nav");
var top_spacing = 15;
var waypoint_offset = 50;
nav_container.waypoint({
handler:function(event,direction){
if (direction == 'down'){
nav_container.css({
'height':nav.outerHeight()}
);
nav.stop().addClass("sticky").css("top",-nav.outerHeight()).animate({
"top":top_spacing}
);
}
else{
nav_container.css({
'height':'auto'}
);
nav.stop().removeClass("sticky").css("top",nav.outerHeight()+waypoint_offset).animate({
"top":""}
);
}
}
,offset:function(){
return -nav.outerHeight()-waypoint_offset;
}
}
);
var sections = $("section");
var navigation_links = $("nav a");
sections.waypoint({
handler:function(event,direction){
var active_section;
active_section = $(this);
if (direction === "up") active_section = active_section.prev();
var active_link = $('nav a[href="#' + active_section.attr("id") + '"]');
navigation_links.removeClass("selected");
active_link.addClass("selected");
}
,offset:'25%'}
)navigation_links.click( function(event){
$.scrollTo($(this).attr("href"),{
duration:200,offset:{
'left':0,'top':-0.15*$(window).height()}
}
);
}
);
}
);
JS代码(waypoints.min.js):
/*jQuery Waypoints - v1.1.4Copyright (c) 2011-2012 Caleb TroughtonDual licensed under the MIT license and GPL license.https://github.com/imakewebthings/jquery-waypoints/blob/master/MIT-license.txthttps://github.com/imakewebthings/jquery-waypoints/blob/master/GPL-license.txt*/
(function($,k,m,i,d){
var e=$(i),g="waypoint.reached",b=function(o,n){
o.element.trigger(g,n);
if(o.options.triggerOnce){
o.element[k]("destroy")}
}
,h=function(p,o){
var n=o.waypoints.length-1;
while(n>=0&&o.waypoints[n].element[0]!==p[0]){
n-=1}
return n}
,f=[],l=function(n){
$.extend(this,{
element:$(n),oldScroll:0,waypoints:[],didScroll:false,didResize:false,doScroll:$.proxy(function(){
var q=this.element.scrollTop(),p=q>this.oldScroll,s=this,r=$.grep(this.waypoints,function(u,t){
return p?(u.offset>s.oldScroll&&u.offset<=q):(u.offset<=s.oldScroll&&u.offset>q)}
),o=r.length;
if(!this.oldScroll||!q){
$[m]("refresh")}
this.oldScroll=q;
if(!o){
return}
if(!p){
r.reverse()}
$.each(r,function(u,t){
if(t.options.continuous||u===o-1){
b(t,[p?"down":"up"])}
}
)}
,this)}
);
$(n).scroll($.proxy(function(){
if(!this.didScroll){
this.didScroll=true;
i.setTimeout($.proxy(function(){
this.doScroll();
this.didScroll=false}
,this),$[m].settings.scrollThrottle)}
}
,this)).resize($.proxy(function(){
if(!this.didResize){
this.didResize=true;
i.setTimeout($.proxy(function(){
$[m]("refresh");
this.didResize=false}
,this),$[m].settings.resizeThrottle)}
}
,this));
e.load($.proxy(function(){
this.doScroll()}
,this))}
,j=function(n){
var o=null;
$.each(f,function(p,q){
if(q.element[0]===n){
o=q;
return false}
}
);
return o}
,c={
init:function(o,n){
this.each(function(){
var u=$.fn[k].defaults.context,q,t=$(this);
if(n&&n.context){
u=n.context}
if(!$.isWindow(u)){
u=t.closest(u)[0]}
q=j(u);
if(!q){
q=new l(u);
f.push(q)}
var p=h(t,q),s=p<0?$.fn[k].defaults:q.waypoints[p].options,r=$.extend({
}
,s,n);
r.offset=r.offset==="bottom-in-view"?function(){
var v=$.isWindow(u)?$[m]("viewportHeight"):$(u).height();
return v-$(this).outerHeight()}
:r.offset;
if(p<0){
q.waypoints.push({
element:t,offset:null,options:r}
)}
else{
q.waypoints[p].options=r}
if(o){
t.bind(g,o)}
if(n&&n.handler){
t.bind(g,n.handler)}
}
);
$[m]("refresh");
return this}
,remove:function(){
return this.each(function(o,p){
var n=$(p);
$.each(f,function(r,s){
var q=h(n,s);
if(q>=0){
s.waypoints.splice(q,1)}
}
)}
)}
,destroy:function(){
return this.unbind(g)[k]("remove")}
}
,a={
refresh:function(){
$.each(f,function(r,s){
var q=$.isWindow(s.element[0]),n=q?0:s.element.offset().top,p=q?$[m]("viewportHeight"):s.element.height(),o=q?0:s.element.scrollTop();
$.each(s.waypoints,function(u,x){
if(!x){
return}
var t=x.options.offset,w=x.offset;
if(typeof x.options.offset==="function"){
t=x.options.offset.apply(x.element)}
else{
if(typeof x.options.offset==="string"){
var v=parseFloat(x.options.offset);
t=x.options.offset.indexOf("%")?Math.ceil(p*(v/100)):v}
}
x.offset=x.element.offset().top-n+o-t;
if(x.options.onlyOnScroll){
return}
if(w!==null&&s.oldScroll>w&&s.oldScroll<=x.offset){
b(x,["up"])}
else{
if(w!==null&&s.oldScroll<w&&s.oldScroll>=x.offset){
b(x,["down"])}
else{
if(!w&&o>x.offset){
b(x,["down"])}
}
}
}
);
s.waypoints.sort(function(u,t){
return u.offset-t.offset}
)}
)}
,viewportHeight:function(){
return(i.innerHeight?i.innerHeight:e.height())}
,aggregate:function(){
var n=$();
$.each(f,function(o,p){
$.each(p.waypoints,function(q,r){
n=n.add(r.element)}
)}
);
return n}
}
;
$.fn[k]=function(n){
if(c[n]){
return c[n].apply(this,Array.prototype.slice.call(arguments,1))}
else{
if(typeof n==="function"||!n){
return c.init.apply(this,arguments)}
else{
if(typeof n==="object"){
return c.init.apply(this,[null,n])}
else{
$.error("Method "+n+" does not exist on jQuery "+k)}
}
}
}
;
$.fn[k].defaults={
continuous:true,offset:0,triggerOnce:false,context:i}
;
$[m]=function(n){
if(a[n]){
return a[n].apply(this)}
else{
return a.aggregate()}
}
;
$[m].settings={
resizeThrottle:200,scrollThrottle:100}
;
e.load(function(){
$[m]("refresh")}
)}
)(jQuery,"waypoint","waypoints",this);
CSS代码(styles.css):
/* http://meyerweb.com/eric/tools/css/reset/ v2.0b1 | 201101 NOTE:WORK IN PROGRESS USE WITH CAUTION AND TEST WITH ABANDON */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;font:inherit;vertical-align:baseline;}
/* HTML5 display-role reset for older browsers */
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}
body{line-height:1;}
ol,ul{list-style:none;}
blockquote,q{quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}
/* remember to highlight inserts somehow! */
ins{text-decoration:none;}
del{text-decoration:line-through;}
table{border-collapse:collapse;border-spacing:0;}
/*base*/
body{font-size:14px;font-family:Arial,sans-serif;color:#666;padding:2em 0;background:url(img/farmer.png) top center no-repeat #e8e9e4;/*http://subtlepatterns.com/?p=1109*/
}
p{font-size:1em;line-height:1.5em;margin:0 0 1.5em 0;}
a{color:#40bfe8;}
a:hover{text-decoration:none;}
h1{font-size:6em;font-weight:bold;margin:0 0 .3em 0;color:#40bfe8;letter-spacing:-0.07em;}
h3{font-size:2em;font-weight:bold;line-height:1.3em;margin:0 0 .5em 0;color:#40bfe8;letter-spacing:-0.07em;}
img{max-width:100%;margin-bottom:1em}
.wrapper{position:relative;width:900px;margin:0 auto;padding:0;background:#ffffff;-webkit-box-shadow:0px 0px 8px 0px rgba(0,0,0,0.1);/* Saf3-4,iOS 4.0.2 - 4.2,Android 2.3+ */
-moz-box-shadow:0px 0px 8px 0px rgba(0,0,0,0.1);/* FF3.5 - 3.6 */
box-shadow:0px 0px 8px 0px rgba(0,0,0,0.1);/* Opera 10.5,IE9,FF4+,Chrome 6+,iOS 5 */
-webkit-border-radius:0 0 1px 1px;-moz-border-radius:0 0 1px 1px;border-radius:0 0 1px 1px;}
header{padding:2em 2em 0;}
section{padding:0 2em 1em;}
footer{padding:1em;font-size:0.9em;}
hr{width:100%;display:block;height:1px;border:none;outline:none;clear:both;background:#ccc;margin:1em 0;}
.wrapper .column{float:left;display:inline;width:50%;padding:0;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;}
.column.left{padding-right:1em}
.column.right{padding-left:1em}
.nav-container{margin-bottom:2em;width:100%;margin-right:-2em}
nav{z-index:42;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;width:928px;padding:1em 3em;margin-left:-14px;background:rgba(132,138,106,0.7);filter:alpha(opacity=80);/* IE6-IE8 */
position:relative;border-top-left-radius:1em 0.5em;border-top-right-radius:1em 0.5em;}
.nav-left{position:absolute;left:0;bottom:-14px;width:14px;height:14px;background:#848a6a;background:rgba(132,138,106,0.7);border-bottom-left-radius:100% 50%;}
.nav-left:after{content:'';position:absolute;right:0;width:66%;height:66%;background:#000;border-top-left-radius:100% 50%;border-bottom-left-radius:100% 50%;}
.nav-right{position:absolute;right:0;bottom:-14px;width:14px;height:14px;background:#848a6a;background:rgba(132,138,106,0.7);border-bottom-right-radius:100% 50%;}
.nav-right:after{content:'';position:absolute;left:0;width:66%;height:66%;background:#000;border-top-right-radius:100% 50%;border-bottom-right-radius:100% 50%;}
nav li{display:inline;list-style:none;}
nav li a{text-decoration:none;font-size:1.2em;color:#2c2e24;font-weight:bold;display:inline-block;width:5em;text-align:center;padding:.5em 1em;-webkit-border-radius:1px;-moz-border-radius:1px;border-radius:1px;}
nav li a:hover,nav li a.selected{color:#fff;background:#40bfe8;}
/*clearfix*/
.wrapper:before,.wrapper:after{content:'';display:block;overflow:hidden;visibility:hidden;width:0;height:0;clear:both;zoom:1}
.sticky{position:fixed;top:15px;animation:thedrop 1s 1;-moz-animation:thedrop 1s 1;-webkit-animation:thedrop 1s 1;}
.sticky .nav-above{position:absolute;top:-15px;left:1em;right:1em;height:15px;background:linear-gradient(top,rgba(255,255,255,1) 0%,rgba(255,255,255,0) 80%);background:-webkit-linear-gradient(top,rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);background:-moz-linear-gradient(top,rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);}
/*media queries*/
/* #Tablet (Portrait) width of 768px */
@media only screen and (min-width:768px) and (max-width:959px){.wrapper{width:700px;}
nav{width:728px;}
}
/* #Mobile (Portrait) width of 320px */
@media only screen and (max-width:767px){.wrapper{width:300px;}
.wrapper .column{float:none;width:100%;}
nav{width:328px;}
h1{font-size:2.5em;text-align:center;}
h3{font-size:1.3em;text-align:center;}
}
/* Mobile (Landscape) width of 480px */
@media only screen and (min-width:480px) and (max-width:767px){.wrapper{width:400px;}
nav{width:428px;}
h1{font-size:3.5em;}
h3{font-size:1.7em;}
}
分享到QQ
分享到微博
微信扫一扫
