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>