資訊專欄INFORMATION COLUMN
摘要：實(shí)現(xiàn)置頂功能的方式有很多，之前也用過(guò)一些，感覺(jué)比較復(fù)雜吧，自己最近做的東西需要，因此也在網(wǎng)上找了些資料，最后找到一個(gè)方法可以獲取頁(yè)面元素到瀏覽器視窗頂部的距離。
JavaScript實(shí)現(xiàn)置頂功能的方式有很多，之前也用過(guò)一些， 感覺(jué)比較復(fù)雜吧，自己最近做的東西需要，因此也在網(wǎng)上找了些資料，最后找到一個(gè)方法 getBoundingClientRect() 可以獲取頁(yè)面元素到瀏覽器視窗頂部的距離。最后代碼如下：
let len = document.getElementById("flexbox").getBoundingClientRect().top;//獲取元素到瀏覽器視窗頂部的距離
//$(document).scrollTop()為滾動(dòng)條的高度
for (let i = $(document).scrollTop(); i < len + $(document).scrollTop(); i++) {
setTimeout(function () {
window.scrollTo(0, i);
}, 0)
}
用循環(huán)的目的主要是使得元素置頂?shù)臅r(shí)候不突兀，這個(gè)過(guò)程可以通過(guò)改變i++來(lái)實(shí)現(xiàn)，同時(shí)需要注意一點(diǎn)，如果for語(yǔ)句用的是var i 而不是let i,定時(shí)器則需要用立即執(zhí)行函數(shù)包裹來(lái)保證i能立馬生效。
用這種方式實(shí)現(xiàn)的置頂和錨點(diǎn)效果差不多，如果要實(shí)現(xiàn)懸浮置頂（某個(gè)部分固定在頂部），則可以考慮用position:fixed來(lái)實(shí)現(xiàn)。
就這樣吧。。。。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/84213.html
摘要：去頂部去頂部置頂置頂功能置頂功能 HTML： 去頂部 CSS： .fl{ display:block; float:left; width:50px; height:50px; ...
摘要：授權(quán)破解版易優(yōu)企業(yè)建站系統(tǒng)易優(yōu)企業(yè)建站系統(tǒng)是一款十分優(yōu)秀專業(yè)的為企業(yè)創(chuàng)建網(wǎng)站服務(wù)的軟件。去版權(quán)破解版強(qiáng)大好用，為企業(yè)創(chuàng)建網(wǎng)站提供很多幫助和便利。直接去易優(yōu)官網(wǎng)，購(gòu)買(mǎi)商業(yè)授權(quán)即可去除版權(quán)。eyoucms v1.4.9授權(quán)破解版(易優(yōu)企業(yè)建站系統(tǒng))是一款十分優(yōu)秀專業(yè)的為企業(yè)創(chuàng)建網(wǎng)站服務(wù)的軟件。eyoucms v1.4.9去版權(quán)破解版 強(qiáng)大好用，為企業(yè)創(chuàng)建網(wǎng)站提供很多幫助和便利。易優(yōu)cms破解授權(quán)...
摘要：工作到了這個(gè)年數(shù)感覺(jué)那些基本函數(shù)語(yǔ)法已經(jīng)跟人合一了根本不會(huì)為操作一些數(shù)據(jù)結(jié)構(gòu)而思考半天了在做小程序的時(shí)候遇到了個(gè)的場(chǎng)景結(jié)果發(fā)現(xiàn)沒(méi)有以為的那么簡(jiǎn)單也許是之前不求甚解的原因那么現(xiàn)在來(lái)解決的問(wèn)題問(wèn)題的產(chǎn)生與探討方向在小程序中有個(gè)將的某一條置頂?shù)男? 工作到了這個(gè)年數(shù), 感覺(jué)那些基本函數(shù)語(yǔ)法已經(jīng)跟人合一了, 根本不會(huì)為操作一些數(shù)據(jù)結(jié)構(gòu)而思考半天了. 在做小程序的時(shí)候遇到了個(gè)orderby的場(chǎng)景,...
摘要：那么盒子首先就需要設(shè)置一個(gè)的高和定位的值在中也要控制值，通過(guò)判斷滾動(dòng)條移動(dòng)到容器頂部時(shí)固定最終效果獲取屏幕滾動(dòng)條 簡(jiǎn)單響應(yīng)式滾動(dòng)條置頂 一般的，讓頁(yè)面出現(xiàn)滾動(dòng)條的常見(jiàn)方法有： overflow:auto||overflow:scroll 或者overflow-x水平滾動(dòng)條和overflow-y垂直滾動(dòng)條 那么現(xiàn)在要實(shí)現(xiàn)這樣的一個(gè)效果： 直接在body中給一個(gè)header，后面一個(gè)Gr...
閱讀 3606·2021-11-23 09:51
閱讀 2812·2021-11-23 09:51
閱讀 689·2021-10-11 10:59
閱讀 1685·2021-09-08 10:43
閱讀 3239·2021-09-08 09:36
閱讀 3301·2021-09-03 10:30
閱讀 3306·2021-08-21 14:08
閱讀 2212·2021-08-05 09:59
