吸頂的幾種實現方式 | 8月更文挑戰

吸頂是一種常見的設計樣式，即組件一開始隨着節目滾動，但觸碰到某個邊界後吸附在其上固定下來。好比百度首頁的搜索框的吸頂效果。

滾動後的效果圖以下所示：

那麼對於這種很廣泛的吸頂，有哪些實現方式呢？

position: sticky

MDN的CSS文檔關於postion的可用參數中，有一個sticky，其含義爲：

粘性定位元素 （ stickily positioned element ） 是計算後位置屬性爲 sticky 的元素

元素根據正常文檔流進行定位，而後相對它的最近滾動祖先（nearest scrolling ancestor） 和 containing block (最近塊級祖先 nearest block-level ancestor)，包括table-related元素，基於top, right, bottom, 和 left的值進行偏移。偏移值不會影響任何其餘元素的位置。

這種實現方式簡便快捷，其具體實現要求可歸納爲：

1. 父元素可滾動

二、需指定top、bottom、left、right4個值之一

另外須要注意的一點是，該特性是css新增特性，可能存在瀏覽器的支持問題，其具體支持狀況以下圖所示：

而且實現時，保險起見通常添加上：position: -webkit-sticky

樣例代碼

.sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
}
複製代碼

動態樣式

在實際生產中，沒有使用sticky主要是考慮其瀏覽器的支持不全面。所以採用了動態樣式。

思路很簡單：給父元素添加scroll監聽函數，偵聽函數內部判斷當前吸頂組件距離邊界的距離，若其距離小於等於0，則修改其樣式爲：position:fixed;...，以VUE框架爲例（只會VUE~哭），具體實現代碼：

<template>
    ...
    
        <div ref="tabRow" :class={'fixed': fixed}></div>
    ...

</template>

<script>
...
data() {
    return {
        fixed: false
    }
},
mounted: {
    this.$nextTrick(() => {
        // tabRow爲組件的ref值
        // 獲取組件初始距離頁面頂部的距離
        this.offsetTop =  this.$refs.tabRow.getBoundingClientRect().top;
        /**添加偵聽函數*/
        window.addEventListener('scroll' ,  this.handleScroll);
    })
},
methods: {
    handleScroll() {
        // 屏幕當前的滾動距離
        let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
        if (scrollTop >= this.offsetTop) {
            this.fixed = true
        } else {
            this.fixed = false
        }
    }
},
destroyed() { 
    window.removeEventListener("scroll", this.handleScroll);
}
...
</script>

<style>
...
.fixed {
    position: fixed;
    left: 0;
    top: 0;
}
...
</style>
複製代碼