如何只使用CSS建立摺疊標題效果

摺疊標題是向用戶顯示重要信息的絕佳解決方案，例如特價優惠和密鑰通知。許多開發人員在建立此類效果時依賴JavaScript，可是，使用純CSS建立更簡單的摺疊頭效果也是徹底可能的。

摺疊標題的工做方式相似於視差效果。摺疊標題的背景保持固定，以便當用戶向下滾動頁面時，其下方的內容能夠在其上方流動。在本教程中，咱們將向你展現如何建立如下摺疊標題效果：

該演示包括三個部分：

1. 帶有黑色背景的固定標題，位於頁面頂部，包含主菜單。
2. 帶藍色背景的摺疊標題，包含有關特價的額外信息。
3. 用戶滾動到摺疊標題的白色背景的其他內容。

摺疊標頭很是適合用戶體驗。用戶能夠在想要查看特殊信息時隨時滾動頁面，但在閱讀其他內容時不會分散他們的注意力。

如今，讓咱們看看如何逐步建立摺疊標題。

1.建立HTML

HTML包括三個主要部分：<header> 用於固定頂部菜單欄中，.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.放置頂部菜單欄

要將固定菜單欄定位在頁面頂部，你須要將<header>元素的位置設置爲fixed，將z-index設置爲大於零的值。因爲z-index默認爲auto，所以它只須要高於元素父級的z-index值。下面的CSS使用99，由於它可能會保持高於<header>元素的任何父級：

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項繼承<header>（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.設計其他內容的樣式

要在滾動時使標題摺疊，你須要作四件事：

1. 最重要的是，你須要爲其他內容設置背景，以便它能夠在可摺疊標頭的頂部流動。請記住，此效果與視差效果相似; 不一樣的背景須要互相覆蓋。
   • 在演示中，咱們使用了純白色背景。你始終須要在流動內容上設置背景以使此效果起做用（不然摺疊標題不會摺疊）。
2. 相對於兩個固定元素定位內容。top:370px; 下面的規則是<header>（70px）和.banner（300px）的高度之和。
3. 將寬度設置爲100％，以便內容覆蓋整個標題。
4. 將高度設置爲100％，以便背景覆蓋頁面的整個高度（這在移動設備上或在較長頁面的狀況下很重要）。

這是它在代碼中的樣子：

.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;
}
複製代碼

結論

摺疊標題爲你提供了一種用戶友好的方式，能夠在頁面頂部顯示其餘內容。它們的工做方式相似於視差效應; 你須要讓不一樣的背景以不一樣的速度移動，並將流動的內容相對於固定的元素定位。