|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 |
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范例代码
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<!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扒下来的,导航条滚动到顶部时固定在页面上方,兼容各种浏览器
