javascript怎麼實現窗口置頂

javascript實作視窗置頂的方法：1、建立一個前端範例檔；2、透過getBoundingClientRect取得元素到瀏覽器視窗頂部的距離；3、用循環方式讓元素置頂即可。

本文操作環境：windows7系統、javascript1.8.5版、Dell G3電腦。

javascript怎麼實現視窗置頂？

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中文網其他相關文章！