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來實現。
就這樣吧。。。。函數

相關文章
相關標籤/搜索