可以看到，只有滾動以后才出現(xiàn)陰影。一般情況下，使用 JS 監(jiān)聽滾動事件動態(tài)添加類名就可以實現(xiàn)，不過經(jīng)過我的一番嘗試，發(fā)現(xiàn)這種效果僅僅使用 CSS 也能輕易實現(xiàn)。

你也可以提前訪問 CSS auto header shadow(juejin.cn)[1]查看實際效果。那 如何實現(xiàn)的呢，花兩分鐘時間看看吧~

一、頭部固定定位

假設有這樣一個布局。

<header>LOGO</header>
<main>很多內(nèi)容文本</main>

簡單修飾一下

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

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

header{
 position: fixed;
 top: 0
}

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

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

在這里，我更推薦使用sticky定位，在吸頂?shù)耐瑫r，還能保留原有的占位。

header{
 position: sticky;
 top: 0
}

效果如下，只是沒有陰影。

頭部固定定位

二、CSS 實現(xiàn)原理

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

層級關系

• 層級關系為：頭部 > 遮擋物 > 陰影 > 內(nèi)容

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

層級關系滾動原理

原理就是這樣，下面看具體實現(xiàn)

三、CSS 具體實現(xiàn)

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

<header>LOGO</header>
<shadow></shadow>
<main>很多內(nèi)容文本</main>

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

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

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

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

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

• absolute定位在不設置 top 或者 left 值時，仍然位于原先位置，也會跟隨內(nèi)容滾動

現(xiàn)在再來看看層級關系，頭部、陰影、遮擋物都設置了定位，根據(jù) dom 先后順序，此時

• 層級關系為：遮擋物 > 陰影 >  頭部 > 內(nèi)容

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

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

• 層級關系為：頭部 > 遮擋物 > 陰影  > 內(nèi)容

三、更柔和的陰影

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

略微生硬的效果

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

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

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

效果如下：

比較柔和的效果

這樣陰影出現(xiàn)的效果就不再是“向上推進”的效果，你覺得怎么樣呢？

重點來了~ 下面是完整 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>很多內(nèi)容文本</main>

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

四、總結和展望

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

• 固定頭部的布局推薦用 sticky 實現(xiàn)，好處是可以保留頭部占位，無需額外預留
• 整體實現(xiàn)思路是CSS 障眼法和 CSS 層級，相互遮擋
• fixed 定位在不設置 top 或者 left 值時，仍然位于原先位置，但是會在這個位置固定下來
• absolute定位在不設置 top 或者 left 值時，仍然位于原先位置，也會跟隨內(nèi)容滾動
• 純色遮擋在滾動時有些生硬，半透明漸變遮擋在滾動時會更加柔和

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

但是，并不是說這些思考是無用了，實際需求千千萬，官方不可能一一照顧到，就算有規(guī)劃，有草案，可能已經(jīng)是多年以后了，所以學習 CSS 一定不要停止思考，停止想象，這大概也是 CSS 比較有趣的地方吧~最后，如果覺得還不錯，對你有幫助的話，歡迎點贊、收藏、轉(zhuǎn)發(fā)???