如何只使用CSS創建折疊標題效果的方法

小編給大家分享一下如何只使用CSS創建折疊標題效果的方法，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

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

折疊標題的工作方式類似于視差效果。折疊標題的背景保持固定，以便當用戶向下滾動頁面時，其下方的內容可以在其上方流動。在本教程中，我們將向你展示如何創建以下折疊標題效果：

該演示包括三個部分：

1. 帶有黑色背景的固定標題，位于頁面頂部，包含主菜單。

2. 帶藍色背景的折疊標題，包含有關特價的額外信息。

3. 用戶滾動到折疊標題的白色背景的其余內容。

折疊標頭非常適合用戶體驗。用戶可以在想要查看特殊信息時隨時滾動頁面，但在閱讀其余內容時不會分散他們的注意力。

現在，讓我們看看如何逐步創建折疊標題。

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>
                <h3 class="banner-title">Don't Miss Out On Our Next Webinar</h3>
                <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 &raquo;
            </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.設計其余內容的樣式

要在滾動時使標題折疊，你需要做四件事：

1. 最重要的是，你需要為其余內容設置背景，以便它可以在可折疊標頭的頂部流動。請記住，此效果與視差效果類似; 不同的背景需要互相覆蓋。

1. 在演示中，我們使用了純白色背景。你始終需要在流動內容上設置背景以使此效果起作用（否則折疊標題不會折疊）。

2. 相對于兩個固定元素定位內容。top:370px; 下面的規則是 （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;
}

結論

折疊標題為你提供了一種用戶友好的方式，可以在頁面頂部顯示其他內容。它們的工作方式類似于視差效應; 你需要讓不同的背景以不同的速度移動，并將流動的內容相對于固定的元素定位。

以上是“如何只使用CSS創建折疊標題效果的方法”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！