滑动导航

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;
}

<!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>

 

转载于:https://www.cnblogs.com/94YY/p/4524054.html