JavaScript實現置頂功能

KaltZK 發布于2019-08-20 18:13 / 1942人閱讀

摘要：實現置頂功能的方式有很多，之前也用過一些，感覺比較復雜吧，自己最近做的東西需要，因此也在網上找了些資料，最后找到一個方法可以獲取頁面元素到瀏覽器視窗頂部的距離。

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

GPU云服務器云服務器 php實現置頂功能 javascript實現功能置頂功能 javascript功能

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/84213.html

實現置頂功能jQuery

摘要：去頂部去頂部置頂置頂功能置頂功能 HTML：去頂部 CSS： .fl{ display:block; float:left; width:50px; height:50px; ...

SoapEye 2019-08-21 10:19 評論0 收藏0
eyoucms v1.4.9授權破解版易優cms企業建站系統去版權版 v1.4.9

摘要：授權破解版易優企業建站系統易優企業建站系統是一款十分優秀專業的為企業創建網站服務的軟件。去版權破解版強大好用，為企業創建網站提供很多幫助和便利。直接去易優官網，購買商業授權即可去除版權。eyoucms v1.4.9授權破解版(易優企業建站系統)是一款十分優秀專業的為企業創建網站服務的軟件。eyoucms v1.4.9去版權破解版強大好用，為企業創建網站提供很多幫助和便利。易優cms破解授權...

番茄西紅柿 2021-08-10 09:40 評論0 收藏2637
用sort實現orderby

摘要：工作到了這個年數感覺那些基本函數語法已經跟人合一了根本不會為操作一些數據結構而思考半天了在做小程序的時候遇到了個的場景結果發現沒有以為的那么簡單也許是之前不求甚解的原因那么現在來解決的問題問題的產生與探討方向在小程序中有個將的某一條置頂的需工作到了這個年數, 感覺那些基本函數語法已經跟人合一了, 根本不會為操作一些數據結構而思考半天了. 在做小程序的時候遇到了個orderby的場景,...

jiekechoo 2019-08-23 14:14 評論0 收藏0
html簡單響應式滾動條置頂

摘要：那么盒子首先就需要設置一個的高和定位的值在中也要控制值，通過判斷滾動條移動到容器頂部時固定最終效果獲取屏幕滾動條簡單響應式滾動條置頂一般的，讓頁面出現滾動條的常見方法有： overflow:auto||overflow:scroll 或者overflow-x水平滾動條和overflow-y垂直滾動條那么現在要實現這樣的一個效果：直接在body中給一個header，后面一個Gr...

ranwu 2019-08-01 17:41 評論0 收藏0