獲取任意元素距離頁面頂部的距離 樓梯效果

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<spans.length;i++){
            //    獲得當前span距頁面頂部的距離，保存在變量spanTop中
                var spanTop=spans[i].getElementTop();
            //    如果spanTop剛好結余文檔顯示區范圍內時
                if(spanTop>scrollTop+100&&spanTop<scrollTop+window.innerHeight-100){
            //        設置當前span的className為"hover"
                    spans[i].className="hover";
                }else{//  否則
            //        清除當前span的className
                    spans[i].className="";
                }
            }
            self.elevState();
        },false);
        $("#elevator>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<spans.length;i++){
        //    在lis中找到相同位置的li
            var li=lis[i];
        //    如果當前span的class為hover
            if(spans[i].className=="hover"){
        //        在li下找第一個a，隱藏
            li.$("a:first-child").style.display="none";
        //        在li下找第二個a，顯示
            li.$("a:first-child+a").style.display="block";
            }else{//    否則
        //        在li下找第一個a，顯示
            li.$("a:first-child").style.display="block";
        //        在li下找第二個a，隱藏
            li.$("a:first-child+a").style.display="none";
            }
        }
    }
}