CSS層級小技巧!如何在滾動時自動新增頭部陰影?

XboxYan 發表於 2022-07-04
CSS
歡迎關注微信公眾號: 前端偵探

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

作家專區

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

實現效果

你也可以提前訪問 CSS auto header shadow(codepen.io) 檢視實際效果。那 如何實現的呢,花兩分鐘時間看看吧~

一、頭部固定定位

假設有這樣一個佈局

<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 障眼法”。假設有一層陰影,在預設情況下用一個元素遮擋起來,以下都稱之為“遮擋物”。這裡需要考慮好各個部分的層級關係,稍微有些複雜,如下所示(側面層級關係圖)

層級關係

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

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

Kapture 2022-06-19 at 15.04.34.gif

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

三、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 小技巧?用到了3個定位屬性,幾乎零成本,複製幾行程式碼,馬上就可以用起來了,下面總結一下實現要點:

  1. 固定頭部的佈局推薦用 sticky 實現,好處是可以保留頭部佔位,無需額外預留
  2. 整體實現思路是CSS 障眼法和 CSS 層級,相互遮擋
  3. fixed 定位在不設定 top 或者 left 值時,仍然位於原先位置,但是會在這個位置固定下來
  4. absolute定位在不設定 top 或者 left 值時,仍然位於原先位置,也會跟隨內容滾動
  5. 純色遮擋在滾動時有些生硬,半透明漸變遮擋在滾動時會更加柔和

在未來,像這類滾動相關的互動都可以通過@scroll-timeline來實現,有興趣的可以提前瞭解這方面內容,只是現在幾乎不可實際生產使用(目前需要手動開啟實驗特性),可以預料,隨著 CSS 新特性的不斷髮展,像這類“CSS 奇技淫巧”肯定會被官方逐步替代,體驗也會更加完善,但並,並不是說這些思考是無用了,實際需求千千萬,官方不可能一一照顧到,就算有規劃,有草案,可能已經是多年以後了,所以學習 CSS 一定不要停止思考,停止想象,這大概也是 CSS 比較有趣的地方吧~最後,如果覺得還不錯,對你有幫助的話,歡迎點贊、收藏、轉發❤❤❤

歡迎關注微信公眾號: 前端偵探