前言

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

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

offsetTop

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

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

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

目錄

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

望給個(gè) star 支持一下。

四種實(shí)現(xiàn)方式

我們先看一下效果圖：

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

1、粘性定位是什么？

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

MDN 傳送門

2、如何使用？

使用條件：

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

在需要滾動(dòng)吸頂?shù)脑丶由弦韵聵邮奖憧梢詫?shí)現(xiàn)這個(gè)效果：

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

網(wǎng)站標(biāo)題：4種滾動(dòng)吸頂實(shí)現(xiàn)方式的比較-創(chuàng)新互聯(lián)
鏈接地址：http://chinadenli.net/article32/hpisc.html

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

廣告

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