热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

jquery.nav.js定位导航滚动插件

jQuery.nav.js插件代码:**jQueryOnePageNavPlugin*http:github.comdavist11jQuery-One-Page-Na

jQuery.nav.js插件代码:

/*
* jQuery One Page Nav Plugin
* http://github.com/davist11/jQuery-One-Page-Nav
*
* Copyright (c) 2010 Trevor Davis (http://trevordavis.net)
* Dual licensed under the MIT and GPL licenses.
* Uses the same license as jQuery, see:
* http://jquery.org/license
*
* @version 3.0.0
*
* Example usage:
* $('#nav').onePageNav({
* currentClass: 'current',
* changeHash: false,
* scrollSpeed: 750
* });
*/
;(
function($, window, document, undefined){

// our plugin constructor
var OnePageNav= function(elem, options){
this.elem = elem;
this.$elem = $(elem);
this.optiOns= options;
this.metadata = this.$elem.data('plugin-options');
this.$win = $(window);
this.sectiOns= {};
this.didScroll = false;
this.$doc = $(document);
this.docHeight = this.$doc.height();
};

// the plugin prototype
OnePageNav.prototype = {
defaults: {
navItems:
'a',
currentClass:
'current',
changeHash:
false,
easing:
'swing',
filter:
'',
scrollSpeed:
750,
scrollThreshold:
0.5,
begin:
false,
end:
false,
scrollChange:
false
},

init:
function() {
// Introduce defaults that can be extended either
// globally or using an object literal.
this.cOnfig= $.extend({}, this.defaults, this.options, this.metadata);

this.$nav = this.$elem.find(this.config.navItems);

//Filter any links out of the nav
if(this.config.filter !== '') {
this.$nav = this.$nav.filter(this.config.filter);
}

//Handle clicks on the nav
this.$nav.on('click.onePageNav', $.proxy(this.handleClick, this));

//Get the section positions
this.getPositions();

//Handle scroll changes
this.bindInterval();

//Update the positions on resize too
this.$win.on('resize.onePageNav', $.proxy(this.getPositions, this));

return this;
},

adjustNav:
function(self, $parent) {
self.$elem.find(
'.' + self.config.currentClass).removeClass(self.config.currentClass);
$parent.addClass(self.config.currentClass);
},

bindInterval:
function() {
var self = this;
var docHeight;

self.$win.on(
'scroll.onePageNav', function() {
self.didScroll
= true;
});

self.t
= setInterval(function() {
docHeight
= self.$doc.height();

//If it was scrolled
if(self.didScroll) {
self.didScroll
= false;
self.scrollChange();
}

//If the document height changes
if(docHeight !== self.docHeight) {
self.docHeight
= docHeight;
self.getPositions();
}
},
250);
},

getHash:
function($link) {
return $link.attr('href').split('#')[1];
},

getPositions:
function() {
var self = this;
var linkHref;
var topPos;
var $target;

self.$nav.each(
function() {
linkHref
= self.getHash($(this));
$target
= $('#' + linkHref);

if($target.length) {
topPos
= $target.offset().top;
self.sections[linkHref]
= Math.round(topPos);
}
});
},

getSection:
function(windowPos) {
var returnValue = null;
var windowHeight = Math.round(this.$win.height() * this.config.scrollThreshold);

for(var section in this.sections) {
if((this.sections[section] - windowHeight) < windowPos) {
returnValue
= section;
}
}

return returnValue;
},

handleClick:
function(e) {
var self = this;
var $link = $(e.currentTarget);
var $parent = $link.parent();
var newLoc = '#' + self.getHash($link);

if(!$parent.hasClass(self.config.currentClass)) {
//Start callback
if(self.config.begin) {
self.config.begin();
}

//Change the highlighted nav item
self.adjustNav(self, $parent);

//Removing the auto-adjust on scroll
self.unbindInterval();

//Scroll to the correct position
self.scrollTo(newLoc, function() {
//Do we need to change the hash?
if(self.config.changeHash) {
window.location.hash
= newLoc;
}

//Add the auto-adjust on scroll back in
self.bindInterval();

//End callback
if(self.config.end) {
self.config.end();
}
});
}

e.preventDefault();
},

scrollChange:
function() {
var windowTop = this.$win.scrollTop();
var position = this.getSection(windowTop);
var $parent;

//If the position is set
if(position !== null) {
$parent
= this.$elem.find('a[href$="#' + position + '"]').parent();

//If it's not already the current section
if(!$parent.hasClass(this.config.currentClass)) {
//Change the highlighted nav item
this.adjustNav(this, $parent);

//If there is a scrollChange callback
if(this.config.scrollChange) {
this.config.scrollChange($parent);
}
}
}
},

scrollTo:
function(target, callback) {
var offset = $(target).offset().top;

$(
'html, body').animate({
scrollTop: offset
},
this.config.scrollSpeed, this.config.easing, callback);
},

unbindInterval:
function() {
clearInterval(
this.t);
this.$win.unbind('scroll.onePageNav');
}
};

OnePageNav.defaults
= OnePageNav.prototype.defaults;

$.fn.onePageNav
= function(options) {
return this.each(function() {
new OnePageNav(this, options).init();
});
};

})( jQuery, window , document );
/* 代码整理:懒人之家 www.lanrenzhijia.com */

html代码:

DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>Documenttitle>
<style type="text/css">
*
{
margin
: 0;
padding
: 0
}

li
{
list-style
: none
}
a
{text-decoration: none;}

#nav
{
position
: fixed;
*left
: 90px;
top
:100px;
}

#nav li
{
margin-bottom
: 2px;
width
: 130px;
height
: 41px;
line-height
: 41px;
}

#nav a
{
background
: #B18282;
color
: #fff;
display
: block;
text-transform
: uppercase;
-ms-text-overflow
: ellipsis;
padding
: 0 5px;
text-overflow
: ellipsis;
overflow
: hidden;
white-space
: nowrap;
}

#nav a:hover
{
background
: #00d420;
color
: #fff;
}

#nav .current a
{
background
: #00d420;
color
: #fff;
}
.head
{margin: 0 auto; width: 100%; height: 100px; line-height: 100px; background: #D49B6D; text-align: center; font-size: 30px;}
.main
{ width: 800px; margin: 0 auto; }
.box
{ width: 600px; border:1px solid #ddd; margin-left: 140px; }
style>
head>

<body>
<div class="head">导航div>
<div class="main">
<ul id="nav">
<li><a href="#a0">花卉详情a>li>
<li><a href="#a1">介绍a>li>
<li><a href="#a2">形态特征a>li>
<li><a href="#a3">生长习性a>li>
<li><a href="#a4">栽培技术a>li>
<li><a href="#a5">主要价值a>li>
ul>
<div class="box">
<div id="a0" style="height: 300px;border:1px solid #ddd;">花卉详情div>
<div id="a1" style="height: 300px;border:1px solid #ddd;">介绍div>
<div id="a2" style="height: 300px;border:1px solid #ddd;">形态特征div>
<div id="a3" style="height: 300px;border:1px solid #ddd;">生长习性div>
<div id="a4" style="height: 300px;border:1px solid #ddd;">栽培技术div>
<div id="a5" style="height: 300px;border:1px solid #ddd;">主要价值div>
div>
div>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js">script>
<script src="js/jquery.nav.js">script>
<script>
$(
function() {
$(
'#nav').onePageNav();
});
script>
body>

html>

效果图:

 


推荐阅读
author-avatar
大好
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有