HTMLElement.prototype.getElementTop=function(){     var top = this.offsetTop;     var cur = this.offsetParent;     while(cur != null){           top += cur.offsetTop;           cur = cur.offsetParent;    }    return top;      }直接调用getElementTop()即可或得元素距离顶部的值 var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

 楼梯效果：

window.addEventListener("load",function(){    floor.init();},false);//为所有元素添加获得距页面顶部距离的方法，返回一个top值HTMLElement.prototype.getElementTop=function(){    //获得当前元素距父元素顶部的距离，保存在变量top中    var top=this.offsetTop;    //将当前元素的相对定位父元素对象保存在变量curr中    var curr=this.offsetParent;    //循环，只要curr不等于null，就继续获得父元素的父元素    while(curr!=null){    //    再次获得curr距它的父元素顶部的距离，累加到top中        top+=curr.offsetTop;    //    将curr再设置为curr的相对定位的父元素        curr=curr.offsetParent;    }    return top;}var floor={    init:function(){        var self=this;        window.addEventListener("scroll",function(){            //获得页面滚动的高度            var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;            //找到class为floor的div下的head下的所有span，保存在数组spans中            var spans=$("div.floor>header>span");            //遍历spans中每个span            for(var i=0;i
     
      scrollTop+100&&spanTop
      
       ul").addEventListener("mouseover",function(){            var e=window.event||arguments[0];            var target=e.srcElement||e.target;            if(target.nodeName=="A"&&target.className!="etitle"){                target.style.display="none";                target.parentNode.$(".etitle").style.display="block";            }        },false);        $("#elevator>ul").addEventListener("mouseout",function(){            var e=window.event||arguments[0];            var target=e.srcElement||e.target;            if(target.nodeName=="A"&&target.className=="etitle"&&$(target.href.slice(-3)+">header>span").className!="hover"){                target.style.display="none";                target.parentNode.$("a:first-child").style.display="block";            }        },false);    },    elevState:function(){        //判断elevator元素的显示状态        $("#elevator").style.display=$("div.floor>header>span.hover").length!=0?"block":"none";        //获得所有span的数组和所有li的数组        var spans=$("div.floor>header>span");        var lis=$("#elevator>ul>li");        //遍历spans中每个span        for(var i=0;i