先來看看position: fixed;的定義:生成絕對定位的元素,相對於瀏覽器視窗進行定位;
但是在iframe中使用fixed定位,實際上是相對於iframe視窗進行定位,原因在於iframe類似於建立了一個瀏覽器視窗,在使用一些獲取滑鼠位置以及元素位置等方法的時候把iframe當作瀏覽器視窗來處理就行。
以下是一些在iframe中使用fixed需要考慮的常用js事件物件屬性與方法:
獲取滑鼠的位置:
e.clientY // 獲取滑鼠在瀏覽器視窗的Y座標,在iframe中相對於iframe視窗
e.screenY // 獲取的是滑鼠相對於螢幕的上邊距,不考慮iframe因素,
獲取元素的偏移量:
var position = Object.getBoundingClientRect(); //用於獲取某個元素相對於瀏覽器視窗的位置集合,在iframe中相對於iframe視窗
position.top //獲取元素 “頂部” 距離瀏覽器視窗 “頂部” 的距離
position.bottom //獲取元素 “底部” 距離瀏覽器視窗 “頂部” 的距離
position.left //獲取元素 “左側” 距離瀏覽器視窗 “左側” 的距離
position.right //獲取元素 “右側” 距離瀏覽器視窗 “左側” 的距離
Object.offsetTop //獲取元素距離 最近含有 ”定位“ 屬性標籤左側的距離