jquery的offset().top和js的offsetTop的區別，以及jquery的offset().top的實現方法

jquery的offset().top和js的offsetTop的區別，以及jquery的offset().top的實現方法

offset().top是JQ的方法，需要引入JQ才能使用，它獲取的是你綁定元素上邊框相對於html上邊界的偏移量。
offsetTop是原生JS的方法，它獲取的是你綁定元素上邊框相對離自己最近且position屬性為非static的祖先元素的偏移量
offset().top與offsetTop偏移量參照對象不同，offset().top始終是html，而offsetTop參照的對象是可變的。
jquery.offset()的實現：

function offset(curEle){
             var totalLeft = null,totalTop = null,par = curEle.offsetParent;
            //首先把自己本身的進行累加
            totalLeft += curEle.offsetLeft;
            totalTop += curEle.offsetTop;

            //只要沒有找到body，我們就把父級參照物的邊框和偏移量累加
            while(par){
                     if(navigator.userAgent.indexOf("MSIE 8.0") === -1){
                         //不是標准的ie8瀏覽器，才進行邊框累加
                         //累加父級參照物邊框
                         totalLeft += par.clientLeft;
                         totalTop += par.clientTop;
                     }
                    //累加父級參照物本身的偏移
                    totalLeft += par.offsetLeft;
                    totalTop += par.offsetTop;
                    par = par.offsetParent;
            }
            return {left:totalLeft,top:totalTop};
}
console.log(offset(box).top);

offsetParent詳解：

1. offsetParent定義：那么offsetParent就是距離該子元素最近的進行過定位的父元素（position：absolute relative fixed），如果其父元素中不存在定位則offsetParent為：body元 素
2. 根據定義分別存在以下幾種情況
   【1】元素自身有fixed定位，父元素不存在定位，則offsetParent的結果為null（firefox中為：body，其他瀏覽器返回為null）
   【2】元素自身無fixed定位，且父元素也不存在定位，offsetParent為body元素
   【3】元素自身無fixed定位，且父元素存在定位，offsetParent為離自身最近且經過定位的父元素
   【4】body元素的offsetParent是null