如何只使用CSS創(chuàng)建折疊標題效果的示例代碼
我要評論折疊標題是向用戶顯示重要信息的絕佳解決方案，例如特價優(yōu)惠和密鑰通知。許多開發(fā)人員在創(chuàng)建此類效果時依賴JavaScript，但是，使用純CSS創(chuàng)建更簡單的折疊頭效果也是完全可能的。
折疊標題的工作方式類似于視差效果。折疊標題的背景保持固定，以便當用戶向下滾動頁面時，其下方的內容可以在其上方流動。在本教程中，我們將向你展示如何創(chuàng)建以下折疊標題效果：
該演示包括三個部分：
- 帶有黑色背景的固定標題，位于頁面頂部，包含主菜單。
- 帶藍色背景的折疊標題，包含有關特價的額外信息。
- 用戶滾動到折疊標題的白色背景的其余內容。
折疊標頭非常適合用戶體驗。用戶可以在想要查看特殊信息時隨時滾動頁面，但在閱讀其余內容時不會分散他們的注意力。
現(xiàn)在，讓我們看看如何逐步創(chuàng)建折疊標題。
1.創(chuàng)建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; 規(guī)則允許頂部菜單欄保持在所有元素的頂部，即使折疊標題完全折疊并且其余內容到達頁面頂部。
4.設置菜單樣式
雖然創(chuàng)建折疊標題不需要以下CSS規(guī)則，但你可以使用頂部菜單設置樣式：
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規(guī)則到.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來對齊折疊標題內的內容?，F(xiàn)在，它是一個基于列的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.設計其余內容的樣式
要在滾動時使標題折疊，你需要做四件事：
- 最重要的是，你需要為其余內容設置背景，以便它可以在可折疊標頭的頂部流動。請記住，此效果與視差效果類似; 不同的背景需要互相覆蓋。
- 在演示中，我們使用了純白色背景。你始終需要在流動內容上設置背景以使此效果起作用（否則折疊標題不會折疊）。
- 相對于兩個固定元素定位內容。top:370px; 下面的規(guī)則是 （70px）和.banner（300px）的高度之和。
- 將寬度設置為100％，以便內容覆蓋整個標題。
- 將高度設置為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外邊距折疊引發(fā)的問題的相關資料，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-02-27
外邊距折疊指的是毗鄰的兩個或多個外邊距 (margin) 會合并成一個外邊距，本文詳細的介紹了一下css外邊距折疊的實現(xiàn)，分為3種情況，非常具有實用價值，需要的朋友可以參考下2018-10-30- 這篇文章主要介紹了純CSS實現(xiàn)可折疊樹狀菜單，不用js讓你體會到css的強大,需要的朋友可以參考下2018-04-17
- 這篇文章主要為大家介紹了純CSS實現(xiàn)圓角折疊菜單的方法,通過多個寬度漸進變化的頁面元素堆加模擬圓角效果,具有一定參考借鑒價值,需要的朋友可以參考下2015-05-19
這篇文章主要介紹了CSS 實現(xiàn) 圖片鼠標懸停折疊效果,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-09-21
