首頁  >  文章  >  web前端  >  如何利用getBoundingClientRect()來實作div容器滾動固定

如何利用getBoundingClientRect()來實作div容器滾動固定

php中世界最好的语言
php中世界最好的语言原創
2018-02-23 10:25:502275瀏覽

這次帶給大家如何利用getBoundingClientRect()來實現div容器滾動固定,利用getBoundingClientRect()來實現div容器滾動固定的注意事項有哪些,下面就是實戰案例,一起來看一下。

ele.getBoundingClientRect()的方法是可以得到一個元素在整個視圖視窗的位置

可以return的值有width,height,top,left,x ,y,right,bottom

場景

當你的一個div是處在viewport的一個中間位置

你想要的效果是當頁面滾動到這個div的時候,這個div就固定在頁面的頂部位置,其它滾動不變

思路

##實現的思路可以利用這個方法來拿到這個div的top值

這個top值就是這個div到viewport的top值

監聽頁面的滾動

事件 然後當這個top值<=0的時候你可以為這個div加一個fixed固定的一個css樣式

就可以實現這樣一個效果了

相信看了這些案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!

相關閱讀:

html標準寫法與dreamweaver生成程式碼有哪些不一樣

在html裡怎麼添加flash影片格式(flv、swf)檔案

怎麼透過disabled和readonly將input設定為唯讀效果

以上是如何利用getBoundingClientRect()來實作div容器滾動固定的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn