這篇文章主要介紹了怎么利用純CSS實現(xiàn)在滾動時自動添加頭部陰影的相關(guān)知識，內(nèi)容詳細(xì)易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇怎么利用純CSS實現(xiàn)在滾動時自動添加頭部陰影文章都會有所收獲，下面我們一起來看看吧。

專注于為中小企業(yè)提供成都網(wǎng)站設(shè)計、成都網(wǎng)站制作服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)來賓免費做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動了近千家企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設(shè)實現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。

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

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

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

一、頭部固定定位

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

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

簡單修飾一下

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

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

header{
  position: fixed;
  top: 0
}

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

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

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

header{
  position: sticky;
  top: 0
}

效果如下，只是沒有陰影

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

這樣就實現(xiàn)了文章開頭所示效果，效果如下

四、更柔和的陰影

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

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

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

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

效果如下

這樣陰影出現(xiàn)的效果就不再是“向上推進(jì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 結(jié)構(gòu)也很簡單

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

關(guān)于“怎么利用純CSS實現(xiàn)在滾動時自動添加頭部陰影”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對“怎么利用純CSS實現(xiàn)在滾動時自動添加頭部陰影”知識都有一定的了解，大家如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

分享標(biāo)題：怎么利用純CSS實現(xiàn)在滾動時自動添加頭部陰影
URL鏈接：http://jinyejixie.com/article32/ipghsc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供云服務(wù)器、用戶體驗、ChatGPT、自適應(yīng)網(wǎng)站、移動網(wǎng)站建設(shè)、網(wǎng)站設(shè)計

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)