鑽石舞台

前言

蠻常見的一種場景，監聽滾動的時候給模塊 「賦能」。今日前端早讀課文章由閱文 @XboxYan 授權，公號：前端偵探分享。

@XboxYan，閱文體驗設計部，專注用戶體驗相關，熱愛 CSS，熱愛原生，歡迎關注 github:https://github.com/XboxYan

正文從這開始～～

在網頁中，經常會用陰影來突出層級關係，特別是頂部導航，但有時候設計覺得沒必要一開始就顯示陰影，只有滾動後才出現。比如下面這個例子，注意觀察頭部陰影

可以看到，只有滾動以後才出現陰影。一般情況下，使用 JS 監聽滾動事件動態添加類名就可以實現，不過經過我的一番嘗試，發現這種效果僅僅使用 CSS 也能輕易實現，下面是實現效果

你也可以提前訪問 CSS auto header shadow 查看實際效果。那 如何實現的呢，花兩分鐘時間看看吧～

一、頭部固定定位

假設有這樣一個布局

<header>LOGO</header> <main>很多內容文本</main>

簡單修飾一下

header{ background: #fff; font-size: 20px; padding: 10px; }

頭部固定定位有很多種方式，比較常見的是使用 fixed 定位

header{ position: fixed; top: 0 }

但是，fixed 定位是不占空間的，會導致遮擋內容區域，所以一般還需要預留頭部一部分空間出來，比如這樣

main{ margin-top: 頭部的高度 }

在這裡，我更推薦使用 sticky 定位，在吸頂的同時，還能保留原有的占位

header{ position: sticky; top: 0 }

效果如下，只是沒有陰影

頭部固定定位

二、CSS 實現原理

實現這個效果，需要一點點 「CSS 障眼法」。假設有一層陰影，在默認情況下用一個元素遮擋起來，以下都稱之為 「遮擋物」。這裡需要考慮好各個部分的層級關係，稍微有些複雜，如下所示（側面層級關係圖）

層級關係

層級關係為：頭部 > 遮擋物 > 陰影 > 內容

在滾動過程中，陰影就自動就可見了，遮擋物正好又會被頭部遮住，注意，遮擋物和內容是一起滾動的，動態演示如下

層級關係滾動原理

原理就是這樣，下面看具體實現

三、CSS 具體實現

根據以上原理，這裡需要添加一個元素，陰影和遮擋物都可以用偽元素生成

<header>LOGO</header> <shadow></shadow> <main>很多內容文本</main>

這裡陰影的位置是固定的，也不需要占據空間，所以可以直接用 fixed 定位，也可以不設置 top 值，因為默認就位於非定位時的位置（又體現出 sticky 的好處了），也就是頭部下面

shadow::before{ content: ''; box-shadow: 0 0 10px 1px #333; position: fixed; /*無需 top 值*/ width: 100%; }

fixed 定位在不設置 top 或者 left 值時，仍然位於原先位置，但是會在這個位置固定下來

遮擋物可以用純色填充，而且需要跟隨內容滾動，也不需要占據空間，同時也為了提升層級，可以設置一個 absolute 定位

shadow::after{ content: ''; width: 100%; height: 15px; background: #fff; position: absolute; /*無需 top 值*/ }

absolute 定位在不設置 top 或者 left 值時，仍然位於原先位置，也會跟隨內容滾動

現在再來看看層級關係，頭部、陰影、遮擋物都設置了定位，根據 dom 先後順序，此時

層級關係為：遮擋物 > 陰影 > 頭部 > 內容

頭部應該是最高的，所以需要單獨改變一下層級

header{ /**/ z-index: 1; }

層級關係為：頭部 > 遮擋物 > 陰影 > 內容

這樣就實現了文章開頭所示效果，效果如下

實際效果

三、更柔和的陰影

其實上面的效果已經很好了，但是稍微有點生硬。仔細觀察，在慢慢滾動過程中，陰影有一種 「向上推進」 的感覺，如下

略微生硬的效果

有沒有辦法讓這個過程更柔和一點呢？比如透明度的變化？

當然也是可以的，實現也比較簡單。上面比較生硬的原因是，遮擋物是純色的，如果換成半透明漸變是不是就好一些呢？

shadow::after{ height: 30px; background: linear-gradient(to bottom, #fff 50% , transparent); }

效果如下

比較柔和的效果

這樣陰影出現的效果就不再是 「向上推進」 的效果，你覺得怎麼樣呢？

重點來了～下面是完整 CSS 代碼（20 行不到～）

header{ position: sticky; background: #fff; top: 0; font-size: 20px; padding: 10px; z-index: 1; } shadow::before{ content: ''; box-shadow: 0 0 10px 1px #333; position: fixed; width: 100%; } shadow::after{ content: ''; width: 100%; height: 30px; background: linear-gradient(to bottom, #fff 50% , transparent); position: absolute; }

HTML 結構也很簡單

<header>LOGO</header> <shadow></shadow> <main>很多內容文本</main>

你可以訪問在線鏈接 CSS auto header shadow (codepen.io) 或者 CSS auto header shadow (juejin.cn)

四、總結和展望

以上就是全部分享內容了，是不是又掌握一個 CSS 小技巧？用到了 3 個定位屬性，幾乎零成本，複製幾行代碼，馬上就可以用起來了，下面總結一下實現要點：

固定頭部的布局推薦用 sticky 實現，好處是可以保留頭部占位，無需額外預留

整體實現思路是 CSS 障眼法和 CSS 層級，相互遮擋

fixed 定位在不設置 top 或者 left 值時，仍然位於原先位置，但是會在這個位置固定下來

absolute 定位在不設置 top 或者 left 值時，仍然位於原先位置，也會跟隨內容滾動

純色遮擋在滾動時有些生硬，半透明漸變遮擋在滾動時會更加柔和

在未來，像這類滾動相關的交互都可以通過 @scroll-timeline 來實現，有興趣的可以提前了解這方面內容，只是現在幾乎不可實際生產使用（目前需要手動開啟實驗特性），可以預料，隨着 CSS 新特性的不斷發展，像這類 「CSS 奇技淫巧」 肯定會被官方逐步替代，體驗也會更加完善，

但是，並不是說這些思考是無用了，實際需求千千萬，官方不可能一一照顧到，就算有規劃，有草案，可能已經是多年以後了，所以學習 CSS 一定不要停止思考，停止想象，這大概也是 CSS 比較有趣的地方吧～

關於本文作者：@XboxYan原文：https://mp.weixin.qq.com/s/xh2w0vRMk775zdtrB6sd6A

關於【CSS】相關推薦。歡迎讀者自薦投稿，前端早讀課等你。