99热在线精品一区二区三区_国产伦精品一区二区三区女破破_亚洲一区二区三区无码_精品国产欧美日韩另类一区

小編給大家分享一下css怎么實(shí)現(xiàn)滾動(dòng)吸頂，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

修改版預(yù)覽

這篇文章是三天前寫就的，有大佬給我提了一些修改意見，我覺(jué)得這個(gè)意見確實(shí)中肯。所以就有了這個(gè)升級(jí)的修改版本。代碼同步更新到 GitHub 了。

修改內(nèi)容如下：

1. 添加了圖文說(shuō)明，直觀的說(shuō)明 getBoundingClientRect()集合含義

2. 頻繁 reflow 風(fēng)險(xiǎn)該如何規(guī)避(優(yōu)化滾動(dòng)監(jiān)聽)

3. 監(jiān)聽滾動(dòng)帶來(lái)的性能問(wèn)題(使用 IntersectionObserver, 新方案)

修改更新的內(nèi)容在第 4 點(diǎn)和第 5 點(diǎn)，如果你看過(guò)本文，可以直接看修改更新的內(nèi)容。或者你可以再看一遍。

前言

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

offsetTop

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

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

或許寫這個(gè)代碼的人沒(méi)有注意到“定位父級(jí)”這個(gè)這個(gè)附屬條件。

后來(lái)在項(xiàng)目中總會(huì)遇到滾動(dòng)吸頂?shù)男Ч枰獙?shí)現(xiàn)，現(xiàn)在我將我知道的 4 種滾動(dòng)吸頂實(shí)現(xiàn)方式做詳細(xì)介紹。

以上這四種方式你都了解嗎？相關(guān)代碼已上傳到 GitHub ，感興趣的可以 clone 代碼到本地運(yùn)行。望給個(gè) star 支持一下。

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

我們先看一下效果圖：

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

1、粘性定位是什么？

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

MDN 傳送門

2、如何使用？

使用條件：

1. 父元素不能 overflow:hidden 或者 overflow:auto 屬性

2. 必須指定 top、bottom、left、right 4 個(gè)值之一，否則只會(huì)處于相對(duì)定位

3. 父元素的高度不能低于 sticky 元素的高度

4. sticky 元素僅在其父元素內(nèi)生效

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

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

3、這個(gè)屬性好用嗎？

我們先看下在 Can I use 中看看這個(gè)屬性的兼容性：

可以看出這個(gè)屬性的兼容性并不是很好，因?yàn)檫@個(gè) API 還只是實(shí)驗(yàn)性的屬性。不過(guò)這個(gè) API 在 IOS 系統(tǒng)的兼容性還是比較好的。

所以我們?cè)谏a(chǎn)環(huán)境如果使用這個(gè) API 的時(shí)候一般會(huì)和下面的幾種方式結(jié)合使用。

二、使用 JQuery 的 offset().top 實(shí)現(xiàn)

我們知道 JQuery 中封裝了操作 DOM 和讀取 DOM 計(jì)算屬性的 API，基于 offset().top 這個(gè) API 和 scrollTop() 的結(jié)合，我們也可以實(shí)現(xiàn)滾動(dòng)吸頂效果。

...
window.addEventListener('scroll', self.handleScrollOne);
...
handleScrollOne: function() {
    let self = this;
    let scrollTop = $('html').scrollTop();
    let offsetTop = $('.title_box').offset().top;
    self.titleFixed = scrollTop > offsetTop;
}
...

這樣實(shí)現(xiàn)固然可以，不過(guò)由于 JQuery 慢慢的退出歷史的舞臺(tái)，我們?cè)诖a中盡量不使用 JQuery 的 API。我們可以基于 offset().top 的源碼自己處理原生 offsetTop。于是乎就有了第三種方式。

scrolloTop() 有兼容性問(wèn)題，在微信瀏覽器、IE、某些 firefox 版本中 $('html').scrollTop() 的值會(huì)為 0，于是乎也就有了第三種方案的兼容性寫法。

三、使用原生的 offsetTop 實(shí)現(xiàn)

我們知道 offsetTop 是相對(duì)定位父級(jí)的偏移量，倘若需要滾動(dòng)吸頂?shù)脑爻霈F(xiàn)定位父級(jí)元素，那么 offsetTop 獲取的就不是元素距離頁(yè)面頂部的距離。

我們可以自己對(duì) offsetTop 做以下處理：

getOffset: function(obj,direction){
    let offsetL = 0;
    let offsetT = 0;
    while( obj!== window.document.body && obj !== null ){
        offsetL += obj.offsetLeft;
        offsetT += obj.offsetTop;
        obj = obj.offsetParent;
    }
    if(direction === 'left'){
        return offsetL;
    }else {
        return offsetT;
    }
}

使用：

...
window.addEventListener('scroll', self.handleScrollTwo);
...
handleScrollTwo: function() {
    let self = this;
    let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
    let offsetTop = self.getOffset(self.$refs.pride_tab_fixed);
    self.titleFixed = scrollTop > offsetTop;
}
...

你是不是看出了以上兩種方式的一些問(wèn)題？

我們一定需要使用 scrollTop - offsetTop 的值來(lái)實(shí)現(xiàn)滾動(dòng)吸頂?shù)男Ч麊幔看鸢甘欠穸ǖ摹?/p>

我們一同看看第四種方案。

四、使用 obj.getBoundingClientRect().top 實(shí)現(xiàn)

定義：這個(gè) API 可以告訴你頁(yè)面中某個(gè)元素相對(duì)瀏覽器視窗上下左右的距離。

使用：tab 吸頂可以使用 obj.getBoundingClientRect().top 代替 scrollTop - offsetTop,代碼如下：

// html

    
        // some code