在網(wǎng)頁(yè)中，經(jīng)常會(huì)用陰影來(lái)突出層級(jí)關(guān)系，特別是頂部導(dǎo)航，但有時(shí)候設(shè)計(jì)覺(jué)得沒(méi)必要一開(kāi)始就顯示陰影，只有滾動(dòng)后才出現(xiàn)。比如下面這個(gè)例子，注意觀察頭部陰影。

作家專(zhuān)區(qū)

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

實(shí)現(xiàn)效果

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

一、頭部固定定位

假設(shè)有這樣一個(gè)布局。

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

簡(jiǎn)單修飾一下。

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

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

header{
  position: fixed;
  top: 0
}

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

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

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

header{
  position: sticky;
  top: 0
}

效果如下，只是沒(méi)有陰影。

頭部固定定位

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

實(shí)現(xiàn)這個(gè)效果，需要一點(diǎn)點(diǎn)“CSS 障眼法”。假設(shè)有一層陰影，在默認(rèn)情況下用一個(gè)元素遮擋起來(lái)，以下都稱(chēng)之為“遮擋物”。這里需要考慮好各個(gè)部分的層級(jí)關(guān)系，稍微有些復(fù)雜，如下所示（側(cè)面層級(jí)關(guān)系圖）。

層級(jí)關(guān)系

層級(jí)關(guān)系為：頭部 > 遮擋物 > 陰影 > 內(nèi)容。

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

層級(jí)關(guān)系滾動(dòng)原理

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

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

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

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

這里陰影的位置是固定的，也不需要占據(jù)空間，所以可以直接用fixed定位，也可以不設(shè)置top值，因?yàn)槟J(rèn)就位于非定位時(shí)的位置（又體現(xiàn)出 sticky 的好處了），也就是頭部下面。

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

fixed 定位在不設(shè)置 top 或者 left 值時(shí)，仍然位于原先位置，但是會(huì)在這個(gè)位置固定下來(lái)。

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

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

absolute定位在不設(shè)置 top 或者 left 值時(shí)，仍然位于原先位置，也會(huì)跟隨內(nèi)容滾動(dòng)。

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

層級(jí)關(guān)系為：遮擋物 > 陰影 >  頭部 > 內(nèi)容。

頭部應(yīng)該是最高的，所以需要單獨(dú)改變一下層級(jí)。

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

層級(jí)關(guān)系為：頭部 > 遮擋物 > 陰影  > 內(nèi)容。

這樣就實(shí)現(xiàn)了文章開(kāi)頭所示效果，效果如下。

實(shí)際效果

三、更柔和的陰影

其實(shí)上面的效果已經(jīng)很好了，但是稍微有點(diǎn)生硬。仔細(xì)觀察，在慢慢滾動(dòng)過(guò)程中，陰影有一種“向上推進(jìn)”的感覺(jué)，如下：

略微生硬的效果。

有沒(méi)有辦法讓這個(gè)過(guò)程更柔和一點(diǎn)呢？比如透明度的變化？

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

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

效果如下：

比較柔和的效果

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

重點(diǎn)來(lái)了~ 下面是完整 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 結(jié)構(gòu)也很簡(jiǎn)單。

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

你可以訪(fǎng)問(wèn)在線(xiàn)鏈接CSS auto header shadow(codepen.io)[2] 或者 CSS auto header shadow(juejin.cn)[3]

四、總結(jié)和展望

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

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

在未來(lái)，像這類(lèi)滾動(dòng)相關(guān)的交互都可以通過(guò)@scroll-timeline來(lái)實(shí)現(xiàn)，有興趣的可以提前了解這方面內(nèi)容，只是現(xiàn)在幾乎不可實(shí)際生產(chǎn)使用（目前需要手動(dòng)開(kāi)啟實(shí)驗(yàn)特性），可以預(yù)料，隨著 CSS 新特性的不斷發(fā)展，像這類(lèi)“CSS 奇技淫巧”肯定會(huì)被官方逐步替代，體驗(yàn)也會(huì)更加完善，但是，并不是說(shuō)這些思考是無(wú)用了，實(shí)際需求千千萬(wàn)，官方不可能一一照顧到，就算有規(guī)劃，有草案，可能已經(jīng)是多年以后了，所以學(xué)習(xí) CSS 一定不要停止思考，停止想象，這大概也是 CSS 比較有趣的地方吧！