scrollTop、offsetTop、offsetHeight等相對位置介紹

1. scrollTop 滾動條相對於其頂部的偏移
2. offsetTop 返回當前元素上邊緣距離offsetParent元素的距離，返回值是數字，單位是像素。
3. offsetHeight 返回當前元素的高度，包括內邊距和邊框
4. event.clientX，event.clientY 相對於瀏覽器窗口的(x,,y)座標，不包括工具欄和滾動條
5. event.pageX， event.pageY 相對於文檔的(x,,y)座標

offsetParent 元素是最近的採用定位（position屬性值爲fixed、relative或者absolute）祖先元素，如果沒有采用定位的話，返回body元素

.panel{
   position: absolute;
   top: 50px;
   left: 50px;
}

$(function(){

    var offsetTop1 = document.getElementById("panel").offsetTop;
    // 列表的高度是90px
    var offsetTop2 = document.getElementById("list_2").offsetTop;
    // 50 90
    console.log(offsetTop1,offsetTop2);

})

<div class="panel" id="panel">
    <a href="javascript:void(0);" class="media-box media-msg" id="list_1">
        <div class="box-media-box__hd">
            <span class="fa fa-caret-square-o-left"></span>
        </div>
        <div class="box-media-box__bd">
            <div class="media-box__title">heh</div>
            <p class="media-box__desc">由各種物質組成的巨型球狀天體，行軌道。</p>
        </div>
    </a>
    <a href="javascript:void(0);" class="media-box media-msg" id="list_2">
        <div class="box-media-box__hd">
            <span class="fa fa-caret-square-o-left"></span>
        </div>
        <div class="box-media-box__bd">
            <div class="media-box__title">heh</div>
            <p class="media-box__desc">由各種物質組成的巨型球有自己的運行軌道。</p>
        </div>
    </a>
 </div>