jquery.nav.js定位导航滚动插件
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>Document</title> <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>
效果图: