javascript實現置頂的方法:1、透過getBoundingClientRect取得元素到瀏覽器視窗頂部的距離;2、透過「$(document).scrollTop() for(...)」方法實現置頂功能即可。
本文操作環境:windows7系統、javascript1.8.5版、Dell G3電腦。
JavaScript實現置頂功能
JavaScript實現置頂功能的方式有很多,之前也用過一些, 感覺比較複雜吧,自己最近做的東西需要,因此也在網路上找了些資料,最後找到一個方法getBoundingClientRect() 可以取得頁面元素到瀏覽器視窗頂端的距離。
最後程式碼如下:
let len = document.getElementById('flexbox').getBoundingClientRect().top;//获取元素到浏览器视窗顶部的距离 //$(document).scrollTop()为滚动条的高度 for (let i = $(document).scrollTop(); i < len + $(document).scrollTop(); i++) { setTimeout(function () { window.scrollTo(0, i); }, 0) }
用迴圈的目的主要是使得元素置頂的時候不突兀,這個過程可以透過改變i 來實現,同時需要注意一點,如果for語句用的是var i 而不是let i,定時器則需要用立即執行函數包裹來保證i能立刻生效。
用這種方式實現的置頂和錨點效果差不多,如果要實現懸浮置頂(某個部分固定在頂部),則可以考慮用position:fixed來實現。
就這樣吧。 。 。 。
【推薦學習:javascript基礎教學】
#以上是javascript怎麼實現置頂的詳細內容。更多資訊請關注PHP中文網其他相關文章!