以前所有操作都用彈窗彈個小層出來，然后最近整體換成了氣泡風(fēng)格，點哪里操作浮層就出現(xiàn)在哪里。我采用的是共用一個操作浮層，隨元素位置而變換浮層的位置。

?

思路大概就是如下：

第一：確定浮層基于哪個元素定位

第二：根據(jù)目標(biāo)元素的位置確定浮層的位置。

浮層的left值 = 整個元素的寬+然后得到元素左邊距離視口的距離；

浮層的top值 = 元素上邊距離視口的距離 - (或者+) 要微調(diào)的距離

（在例子里浮層左邊的三角形要對齊點擊的文字,所以要減去部分高度，因此具體的距離要自己根據(jù)需求微調(diào)）

我采用的調(diào)試方法是直接把浮層的top值先設(shè)為0，查看浮層的top值與元素的top值的關(guān)系，再來決定要微調(diào)的距離是什么

那怎么得到元素距離視口的距離呢，就是getBoundingClientRect方法。

element.getBoundingClientRect()會返回元素的高和寬以及元素本身的上下左右距離視口的距離;

?

補充一點：當(dāng)頁面目標(biāo)元素可能會因為整個頁面的滾動而改變位置時，浮層的高度或者寬度加上頁面滾動的距離即可。

與這個方法相關(guān)的一些兼容什么的在MSDN上有更詳盡的解釋：

https://developer.mozilla.org/zh-CN/docs/Web/API/Element/getBoundingClientRect

在這篇文章中，利用這個方法完成了頁面內(nèi)容跳轉(zhuǎn)的功能。（即點擊小標(biāo)題，就跳轉(zhuǎn)對對應(yīng)的標(biāo)題部分）

http://www.cnblogs.com/xxcanghai/p/5015712.html

轉(zhuǎn)載于:https://www.cnblogs.com/coconutGirl/p/7505471.html

總結(jié)

以上是生活随笔為你收集整理的得到目标元素距离视口的距离以及元素自身的宽度与高度（用于浮层位置的动态改变）...的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。