前言

創(chuàng)新互聯(lián)是專業(yè)的芒市網(wǎng)站建設(shè)公司，芒市接單;提供做網(wǎng)站、網(wǎng)站建設(shè),網(wǎng)頁設(shè)計,網(wǎng)站設(shè)計,建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進行芒市網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團隊,希望更多企業(yè)前來合作!

我入職第二家公司接到的第一個需求就是修復(fù)之前外包做的滾動吸頂效果。我當時很納悶為何一個滾動吸頂會有 bug，后來我查看代碼才發(fā)現(xiàn)直接用的是 offsetTop 這個屬性，而且并沒有做兼容性處理。

offsetTop

用于獲得當前元素到定位父級（ element.offsetParent ）頂部的距離（偏移值）。

定位父級 offsetParent 的定義是：與當前元素最近的 position != static 的父級元素。

或許寫這個代碼的人沒有注意到“定位父級”這個這個附屬條件。
后來在項目中總會遇到滾動吸頂?shù)男Ч枰獙崿F(xiàn)，現(xiàn)在我將我知道的 4 種滾動吸頂實現(xiàn)方式做詳細介紹。

目錄

1. 使用 position:sticky 實現(xiàn)
2. 使用 JQuery 的 offset().top 實現(xiàn)
3. 使用原生的 offsetTop 實現(xiàn)
4. 使用 obj.getBoundingClientRect().top 實現(xiàn)

望給個 star 支持一下。

四種實現(xiàn)方式

我們先看一下效果圖：

一、使用 position:sticky 實現(xiàn)

1、粘性定位是什么？

粘性定位 sticky 相當于相對定位 relative 和固定定位 fixed 的結(jié)合；在頁面元素滾動過程中，某個元素距離其父元素的距離達到 sticky 粘性定位的要求時；元素的相對定位 relative 效果變成固定定位 fixed 的效果。

MDN 傳送門

2、如何使用？

使用條件：

父元素不能 overflow:hidden 或者 overflow:auto 屬性
必須指定 top、bottom、left、right 4 個值之一，否則只會處于相對定位
父元素的高度不能低于 sticky 元素的高度
sticky 元素僅在其父元素內(nèi)生效

在需要滾動吸頂?shù)脑丶由弦韵聵邮奖憧梢詫崿F(xiàn)這個效果：

.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

網(wǎng)站標題：4種滾動吸頂實現(xiàn)方式的比較-創(chuàng)新互聯(lián)
鏈接地址：http://m.newbst.com/article32/hpisc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供云服務(wù)器、標簽優(yōu)化、網(wǎng)站設(shè)計公司、網(wǎng)站制作、微信公眾號、手機網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)