从discuzx3扒下来的,导航条滚动到顶部时固定在页面上方,兼容各种浏览器

function fixed_top_nv(eleid, disbind) {
	this.nv = eleid && $(eleid) || $('nv');
	this.openflag = this.nv && BROWSER.ie != 6;
	this.nvdata = {};
	this.init = function (disattachevent) {
		if(this.openflag) {
			if(!disattachevent) {
				var obj = this;
				_attachEvent(window, 'resize', function(){obj.reset();obj.init(1);obj.run();});
				var switchwidth = $('switchwidth');
				if(switchwidth) {
					_attachEvent(switchwidth, 'click', function(){obj.reset();obj.openflag=false;});
				}
			}

			var next = this.nv;
			try {
				while((next = next.nextSibling).nodeType != 1 || next.style.display === 'none') {}
				this.nvdata.next = next;
				this.nvdata.height = parseInt(this.nv.offsetHeight, 10);
				this.nvdata.width = parseInt(this.nv.offsetWidth, 10);
				this.nvdata.left = this.nv.getBoundingClientRect().left - document.documentElement.clientLeft;
				this.nvdata.position = this.nv.style.position;
				this.nvdata.opacity = this.nv.style.opacity;
			} catch (e) {
				this.nvdata.next = null;
			}
		}
	};

	this.run = function () {
		var fixedheight = 0;
		if(this.openflag && this.nvdata.next){
			var nvnexttop = document.body.scrollTop || document.documentElement.scrollTop;
			var dofixed = nvnexttop !== 0 && document.documentElement.clientHeight >= 15 && this.nvdata.next.getBoundingClientRect().top - this.nvdata.height < 0;
			if(dofixed) {
				if(this.nv.style.position != 'fixed') {
					this.nv.style.borderLeftWidth = '0';
					this.nv.style.borderRightWidth = '0';
					this.nv.style.height = this.nvdata.height + 'px';
					this.nv.style.width = this.nvdata.width + 'px';
					this.nv.style.top = '0';
					this.nv.style.left = this.nvdata.left + 'px';
					this.nv.style.position = 'fixed';
					this.nv.style.zIndex = '199';
					this.nv.style.opacity = 0.85;
				}
			} else {
				if(this.nv.style.position != this.nvdata.position) {
					this.reset();
				}
			}
			if(this.nv.style.position == 'fixed') {
				fixedheight = this.nvdata.height;
			}
		}
		return fixedheight;
	};
	this.reset = function () {
		if(this.nv) {
			this.nv.style.position = this.nvdata.position;
			this.nv.style.borderLeftWidth = '';
			this.nv.style.borderRightWidth = '';
			this.nv.style.height = '';
			this.nv.style.width = '';
			this.nv.style.opacity = this.nvdata.opacity;
		}
	};
	if(!disbind && this.openflag) {
		this.init();
		_attachEvent(window, 'scroll', this.run);
	}
}

var BROWSER = {};
var USERAGENT = navigator.userAgent.toLowerCase();
browserVersion({'ie':'msie','firefox':'','chrome':'','opera':'','safari':'','mozilla':'','webkit':'','maxthon':'','qq':'qqbrowser'});
if(BROWSER.safari) {
	BROWSER.firefox = true;
}
BROWSER.opera = BROWSER.opera ? opera.version() : 0;

HTMLNODE = document.getElementsByTagName('head')[0].parentNode;
if(BROWSER.ie) {
	BROWSER.iemode = parseInt(typeof document.documentMode != 'undefined' ? document.documentMode : BROWSER.ie);
	HTMLNODE.className = 'ie_all ie' + BROWSER.iemode;
}

function $(id) {
	return !id ? null : document.getElementById(id);
}

function _attachEvent(obj, evt, func, eventobj) {
	eventobj = !eventobj ? obj : eventobj;
	if(obj.addEventListener) {
		obj.addEventListener(evt, func, false);
	} else if(eventobj.attachEvent) {
		obj.attachEvent('on' + evt, func);
	}
}

function _detachEvent(obj, evt, func, eventobj) {
	eventobj = !eventobj ? obj : eventobj;
	if(obj.removeEventListener) {
		obj.removeEventListener(evt, func, false);
	} else if(eventobj.detachEvent) {
		obj.detachEvent('on' + evt, func);
	}
}

function getElementOffset(element)
{
	var left = element.offsetLeft, top = element.offsetTop;
	while(element = element.offsetParent) {
		left += element.offsetLeft;
		top += element.offsetTop;
	}
	if($('nv').style.position == 'fixed') {
		top -= parseInt($('nv').style.height);
	}
	return {'left' : left, 'top' : top};
}

function browserVersion(types) {
	var other = 1;
	for(i in types) {
		var v = types[i] ? types[i] : i;
		if(USERAGENT.indexOf(v) != -1) {
			var re = new RegExp(v + '(\\/|\\s)([\\d\\.]+)', 'ig');
			var matches = re.exec(USERAGENT);
			var ver = matches != null ? matches[2] : 0;
			other = ver !== 0 && v != 'mozilla' ? 0 : other;
		}else {
			var ver = 0;
		}
		eval('BROWSER.' + i + '= ver');
	}
	BROWSER.other = other;
}

 HTML范例代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
 <head>
  <title>导航条浮动</title>
  <meta http-equiv="Content-Type" content="text/html; charset=gbk">
  <script type="text/javascript" src="navfloat.js"></script>

 <style type="text/css">
#nv {
	background: #2b7acd ; height: 33px; overflow: hidden;width:1000px;margin:0 auto;
}
 </style>
</head>

 <body>

<br /><br /><br /><br /><br /><br /><br />

<div id=nv>

aaaaaaaaaaaaaaa啊嗷嗷
</div>

<script>fixed_top_nv();</script>

<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
 </body>
</html>

从discuzzx3扒下来的,导航条滚动到顶部时固定在页面上方,兼容各种浏览器

转载请注明：天狐博客 » 从discuzx3扒下来的,导航条滚动到顶部时固定在页面上方,兼容各种浏览器