折疊標題是向用戶顯示重要信息的絕佳解決方案，例如特價優惠和密鑰通知。許多開發人員在創建此類效果時依賴JavaScript，但是，使用純CSS創建更簡單的折疊頭效果也是完全可能的。
折疊標題的工作方式類似于視差效果。折疊標題的背景保持固定，以便當用戶向下滾動頁面時，其下方的內容可以在其上方流動。在本教程中，我們將向你展示如何創建以下折疊標題效果：
該演示包括三個部分：
折疊標頭非常適合用戶體驗。用戶可以在想要查看特殊信息時隨時滾動頁面，但在閱讀其余內容時不會分散他們的注意力。
現在，讓我們看看如何逐步創建折疊標題。
1.創建HTML
HTML包括三個主要部分：
用于固定頂部菜單欄中，.banner為折疊頭，.article用于內容的其余部分。以下是代碼的外觀：
<div class="container"> <header> <nav> <ul class="menu"> <li class="logo"><a href="#">Dev & Design</a></li> <li><a href="#">Home</a></li> <li><a href="#">Blog</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> </nav> </header> <div class="banner"> <div> <h2 class="banner-title">Don't Miss Out On Our Next Webinar</h2> <p class="banner-desc">Sign Up Now and Choose an Ebook for Free</p> </div> <button class="btn-signup" type="button" onclick="location.href='#'"> Go to Webinars » </button> </div> <article class="article"> <p>...</p> </article> </div>
2.使用CSS添加基本樣式
讓我們通過定義一些重置和基本樣式來啟動CSS，例如：
* { box-sizing: border-box; margin: 0; padding: 0; font-family: sans-serif; color: #222;}a { text-decoration: none;}ul { list-style-type: none;}3.放置頂部菜單欄
要將固定菜單欄定位在頁面頂部，你需要將
元素的位置設置為fixed，將z-index設置為大于零的值。由于z-index默認為auto，因此它只需要高于元素父級的z-index值。下面的CSS使用99，因為它可能會保持高于
元素的任何父級：
header { height: 70px; background: #222; position: fixed; width: 100%; z-index: 99;}z-index: 99; 規則允許頂部菜單欄保持在所有元素的頂部，即使折疊標題完全折疊并且其余內容到達頁面頂部。
4.設置菜單樣式
雖然創建折疊標題不需要以下CSS規則，但你可以使用頂部菜單設置樣式：
nav { height: inherit;}.menu { display: flex; height: inherit; align-items: center; padding: 0 20px;}.menu li { padding: 0 10px;}.menu a { color: white;}.logo { flex: 1; font-size: 22px;}.nav和menu項繼承
（100％）的寬度，以便它們也可在整個屏幕上跨越。
此外，.menu還使用了flexbox，因此菜單項可以水平排成一行，而align-items屬性則垂直居中。
你還可以看到我們添加了flex：1; CSS規則到.logo元素。該flext屬性是一個flex-grow, flex-shrink, and flex-basis的簡寫。當它只有一個值時，它指的是flex-grow，而其他兩個屬性保持默認值。
當flex-grow設置為1時，表示給定元素獲得Flex容器中的所有額外空間。因此，當菜單項保持在右側時，menu元素被推到容器的左側。
5.放置折疊標題
折疊標題也具有固定位置，就像頂部菜單欄一樣。但是，它沒有獲得z-index值，因此當用戶向下滾動頁面并且其余內容逐漸覆蓋橫幅時，它可以“折疊”。
.banner { /* for positioning */ width: 100%; height: 300px; position: fixed; top: 70px; background: linear-gradient(45deg, #98cbff, #98ffcb); /* for content alignment */ display: flex; flex-direction: column; justify-content: space-evenly; align-items: center;}如你所見，我們再次使用flexbox來對齊折疊標題內的內容。現在，它是一個基于列的flex布局，允許你使用justify-content和align-items屬性輕松地垂直和水平對齊元素。
6.設置折疊標題的樣式
雖然這不是折疊標題效果的一部分，但這里是.banner元素的后代（標題，描述和按鈕）在上面的演示中的樣式：
.banner-title { font-size: 32px; margin-bottom: 10px; text-align: center;}.banner-desc { font-size: 22px; text-align: center;}.btn-signup { color: white; background-color: #0056ab; border: 0; padding: 15px 25px; font-size: 16px; cursor: pointer;}在下面的屏幕截圖中，你可以看到我們的演示在此刻的樣子。由于頂部菜單欄和折疊標題都有固定位置，因此它們位于頁面頂部并覆蓋內容的上半部分。我們將通過設置其余內容的樣式，使標題在下一步中可折疊。
7.設計其余內容的樣式
要在滾動時使標題折疊，你需要做四件事：
這是它在代碼中的樣子：
.article { width: 100%; position: relative; top: 370px; background: white; height: 100%; padding: 30px 10%;}.article p { margin-bottom: 20px;}查看整個代碼
并且，折疊標題已完成。下面，你可以查看整個CSS。你還可以查看本文中顯示的折疊標題效果的實時演示。
* { box-sizing: border-box; margin: 0; padding: 0; font-family: sans-serif; color: #222;}a { text-decoration: none;}ul { list-style-type: none;}header { height: 70px; background: #222; position: fixed; width: 100%; z-index: 99;}nav { height: inherit;}.menu { display: flex; height: inherit; align-items: center; padding: 0 20px;}.menu li { padding: 0 10px;}.menu a { color: white;}.logo { flex: 1; font-size: 22px;}.banner { /* for positioning */ width: 100%; height: 300px; position: fixed; top: 70px; background: linear-gradient(45deg, #98cbff, #98ffcb); /* for content alignment */ display: flex; flex-direction: column; justify-content: space-evenly; align-items: center;}.banner-title { font-size: 32px; margin-bottom: 10px; text-align: center;}.banner-desc { font-size: 22px; text-align: center;}.btn-signup { color: white; background-color: #0056ab; border: 0; padding: 15px 25px; font-size: 16px; cursor: pointer;}.article { width: 100%; position: relative; top: 370px; background: white; height: 100%; padding: 30px 10%;}.article p { margin-bottom: 20px;}結論
折疊標題為你提供了一種用戶友好的方式，可以在頁面頂部顯示其他內容。它們的工作方式類似于視差效應; 你需要讓不同的背景以不同的速度移動，并將流動的內容相對于固定的元素定位。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
