折叠标题是向用户显示重要信息（例如特价商品和关键通知）的绝佳解决方案。许多开发人员在创建这种效果时都依赖JavaScript，但是，完全可以使用纯CSS创建更简单的折叠标头效果。
折叠的标题与视差效果相似。折叠标题的背景保持固定，以便当用户向下滚动页面时，其下方的内容可以在其顶部流动。在本教程中，我们将向您展示如何创建以下折叠的标题效果：
该演示包括三个部分：
- 固定标题为黑色背景，位于页面顶部，包括主菜单。
- 具有蓝色背景的折叠标题，其中包含有关特价的额外信息。
- 用户滚动到折叠的标题上的带有白色背景的其余内容。
折叠标题非常适合用户体验。用户可以在想要查看特殊信息的任何时候随时向后滚动页面，但是在阅读其余内容时不会分散注意力。新建一个前端学习qun438905713，在群里大多数都是零基础学习者，大家相互帮助，相互解答，并且还准备很多学习资料，欢迎零基础的小伙伴来一起交流。
现在，让我们逐步了解如何创建折叠标题。
1.创建HTML
HTML由三个主要部分组成：<header>用于固定的顶部菜单栏，.banner用于折叠的标题，而.article用于其余的内容。代码如下所示：
<span style="color:#273238"><span style="color:#cccccc"><span style="color:#81a2be">< <span style="color:#f0c674">DIV </span> 类 = <span style="color:#b5bd68">“容器”</span> > </span> <span style="color:#81a2be">< <span style="color:#f0c674">报头</span> > </span> <span style="color:#81a2be">< <span style="color:#f0c674">NAV</span> > </span> <span style="color:#81a2be">< <span style="color:#f0c674">UL </span> 类 = <span style="color:#b5bd68">“菜单”</span> > </span> <span style="color:#81a2be">< <span style="color:#f0c674">李</span> 类 = <span style="color:#b5bd68">“标志”</span> > </span><span style="color:#81a2be">< <span style="color:#f0c674">一个</span> HREF = <span style="color:#b5bd68">“＃”</span> ></span>开发及设计<span style="color:#81a2be"></ <span style="color:#f0c674">一</span> > </span><span style="color:#81a2be"></ <span style="color:#f0c674">李</span> > </span> <span style="color:#81a2be">< <span style="color:#f0c674">李</span> > </span><span style="color:#81a2be">< <span style="color:#f0c674">一个</span> HREF = <span style="color:#b5bd68">“＃”</span> ></span>主页<span style="color:#81a2be"></ <span style="color:#f0c674">一</span> > </span><span style="color:#81a2be"></ <span style="color:#f0c674">li</span> > </span> <span style="color:#81a2be">< <span style="color:#f0c674">li</span> ></span><span style="color:#81a2be">< <span style="color:#f0c674">一个</span> HREF = <span style="color:#b5bd68">“＃”</span> ></span>博客<span style="color:#81a2be"></ <span style="color:#f0c674">一</span> > </span><span style="color:#81a2be"></ <span style="color:#f0c674">李</span> > </span> <span style="color:#81a2be">< <span style="color:#f0c674">李</span> > </span><span style="color:#81a2be">< <span style="color:#f0c674">一个</span> HREF = <span style="color:#b5bd68">“＃”</span> ></span>关于<span style="color:#81a2be"></ <span style="color:#f0c674">一</span> > </span><span style="color:#81a2be"></ <span style="color:#f0c674">李</span> > </span> <span style="color:#81a2be">< <span style="color:#f0c674">李</span> > </span><span style="color:#81a2be">< <span style="color:#f0c674">一个</span> HREF = <span style="color:#b5bd68">“＃”</span> ></span>联系<span style="color:#81a2be">< / <span style="color:#f0c674">a</span> > </span><span style="color:#81a2be"></ <span style="color:#f0c674">li</span> > </span> <span style="color:#81a2be"></ <span style="color:#f0c674">ul</span> > </span> <span style="color:#81a2be"></ <span style="color:#f0c674">nav</span> > </span> <span style="color:#81a2be"></ <span style="color:#f0c674">标头</span> ></span> <span style="color:#81a2be">< <span style="color:#f0c674">div </span> 类= <span style="color:#b5bd68">“ banner”</span> > </span> <span style="color:#81a2be">< <span style="color:#f0c674">div</span> > </span> <span style="color:#81a2be">< <span style="color:#f0c674">h2 </span> class = <span style="color:#b5bd68">“ banner-title”</span> ></span>不要错过我们的下一个网络研讨会<span style="color:#81a2be"></ <span style="color:#f0c674">h2</span> > </span> <span style="color:#81a2be">< <span style="color:#f0c674">p </span> class = <span style="color:#b5bd68">“ banner-desc”</span> ></span>立即注册并免费选择一本电子书<span style="color:#81a2be"></ <span style="color:#f0c674">p</span> > </span> <span style="color:#81a2be"></ <span style="color:#f0c674">div</span> > </span> <span style="color:#81a2be">< <span style="color:#f0c674">button </span> class = <span style="color:#b5bd68">“ btn-signup” </span> type = <span style="color:#b5bd68">“ button” </span> onclick = <span style="color:#b5bd68">“ location.href ='＃'”</span> ></span> 前往网络研讨会» <span style="color:#81a2be"></ <span style="color:#f0c674">button</span> > </span> <span style="color:#81a2be"></ <span style="color:#f0c674">div</span> > </span> <span style="color:#81a2be">< <span style="color:#f0c674">article </span> class = <span style="color:#b5bd68">“ article”</span> > </span> <span style="color:#81a2be">< <span style="color:#f0c674">p</span> ></span> ... <span style="color:#81a2be"></ <span style="color:#f0c674">p</span> > </span> <span style="color:#81a2be"></ <span style="color:#f0c674">article</span> > </span> <span style="color:#81a2be"></ <span style="color:#f0c674">div</span> ></span></span></span>2.使用CSS添加基本样式
让我们通过定义一些重置和基本样式来启动CSS，例如：
<span style="color:#273238"><span style="color:#cccccc">* { <span style="color:#b294bb">box-sizing</span>：border-box; <span style="color:#b294bb">边距</span>：<span style="color:#cc6666">0</span> ; <span style="color:#b294bb">填充</span>：<span style="color:#cc6666">0</span> ; <span style="color:#b294bb">字体家族</span>：sans-serif; <span style="color:#b294bb">颜色</span>：<span style="color:#cc6666">＃222</span> ; } <span style="color:#81a2be">a</span> { <span style="color:#b294bb">文本修饰</span>：无； } <span style="color:#81a2be">ul</span> { <span style="color:#b294bb">list-style-type</span>：none; }</span></span>3.放置顶部菜单栏
要将固定菜单栏放置在页面顶部，需要将<header>元素的位置设置为fixed，并将z-index设置为大于零的值。由于z-index默认为auto，因此它仅必须高于元素父级的z-index值。下面的CSS使用99，因为它可能会高于<header>元素的任何父元素：
<span style="color:#273238"><span style="color:#cccccc"><span style="color:#81a2be">标头</span> { <span style="color:#b294bb">高度</span>：<span style="color:#cc6666">70像素</span> ; <span style="color:#b294bb">背景</span>：<span style="color:#cc6666">＃222</span> ; <span style="color:#b294bb">位置</span>：固定； <span style="color:#b294bb">宽度</span>：<span style="color:#cc6666">100％</span> ; <span style="color:#b294bb">z索引</span>：<span style="color:#cc6666">99</span>； }</span></span>的z索引：99; 规则允许顶部菜单栏停留在所有元素的顶部，即使折叠标题完全折叠并且其余内容到达页面顶部也是如此。
4.设置菜单样式
尽管以下CSS规则对于创建折叠标题不是必需的，但这是您可以为顶部菜单设置样式的方式：
<span style="color:#273238"><span style="color:#cccccc"><span style="color:#81a2be">导航</span> { <span style="color:#b294bb">高度</span>：继承; } <span style="color:#de935f">.menu</span> { <span style="color:#b294bb">display</span>：flex; <span style="color:#b294bb">高度</span>：继承； <span style="color:#b294bb">align-items</span>：中心; <span style="color:#b294bb">填充</span>：<span style="color:#cc6666">0 </span> <span style="color:#cc6666">20px</span> ; } <span style="color:#de935f">.menu </span> <span style="color:#81a2be">li</span> { <span style="color:#b294bb">padding</span>：<span style="color:#cc6666">0 </span> <span style="color:#cc6666">10px</span> ; } <span style="color:#de935f">.menu </span> <span style="color:#81a2be">a</span> { <span style="color:#b294bb">颜色</span>：白色； } <span style="color:#de935f">.logo</span> { <span style="color:#b294bb">flex</span>：<span style="color:#cc6666">1</span> ; <span style="color:#b294bb">字体大小</span>：<span style="color:#cc6666">22px</span> ; }</span></span>的.nav和。菜单项继承的宽度<报头>元件（100％），以便它们也可以在整个屏幕上跨度。此外，.menu还利用了flexbox，因此菜单项可以在一行中水平排列，而align-items属性则将它们垂直居中。
您还可以看到我们添加了flex：1; .logo元素的CSS规则。该柔性属性是一个速记柔性成长，弹性收缩，和柔性基础。当它仅具有一个值时，它表示flex-grow，而其他两个属性保持其默认值。
当flex-grow设置为1时，意味着给定的元素将获得flex容器中的所有额外空间。结果，徽标被推到容器的左侧，而菜单项位于右侧。
5.放置折叠标题
与顶部菜单栏一样，折叠的标题也具有固定的位置。但是，它没有获得z-index值，因此当用户向下滚动页面并且其余内容逐渐覆盖横幅时，它可能“崩溃”。
<span style="color:#273238"><span style="color:#cccccc"><span style="color:#de935f">.banner</span> { <span style="color:#707880">/ *用于定位* / </span> <span style="color:#b294bb">宽度</span>：<span style="color:#cc6666">100％</span> ; <span style="color:#b294bb">高度</span>：<span style="color:#cc6666">300px</span> ; <span style="color:#b294bb">位置</span>：固定； <span style="color:#b294bb">顶部</span>：<span style="color:#cc6666">70px</span> ; <span style="color:#b294bb">背景</span>：<span style="color:#de935f">线性渐变</span>（45deg，＃98cbff，＃98ffcb）; <span style="color:#707880">/ *用于内容对齐* / </span> <span style="color:#b294bb">display</span>：flex; <span style="color:#b294bb">flex-direction</span>：列; <span style="color:#b294bb">证明内容</span>：空间均匀； <span style="color:#b294bb">align-items</span>：中心; }</span></span>如您所见，我们再次使用flexbox来对齐折叠标题内的内容。现在，它是一个基于列的弹性布局，可让您使用justify-content和align-items属性轻松地垂直和水平对齐元素。
6.设置折叠标题
尽管这也不是折叠标题效果的一部分，但这也是.banner元素的后代（标题，描述和按钮）在上面的演示中的样式：
<span style="color:#273238"><span style="color:#cccccc"><span style="color:#de935f">.banner-title</span> { <span style="color:#b294bb">font-size</span>：<span style="color:#cc6666">32px</span> ; <span style="color:#b294bb">底边距</span>：<span style="color:#cc6666">10px</span> ; <span style="color:#b294bb">text-align</span>：center; } <span style="color:#de935f">.banner-desc</span> { <span style="color:#b294bb">font-size</span>：<span style="color:#cc6666">22px</span> ; <span style="color:#b294bb">text-align</span>：center; } <span style="color:#de935f">.btn-signup</span> { <span style="color:#b294bb">颜色</span>：白色； <span style="color:#b294bb">背景颜色</span>：<span style="color:#cc6666">＃0056ab</span> ; <span style="color:#b294bb">边界</span>：<span style="color:#cc6666">0</span> ; <span style="color:#b294bb">填充</span>：<span style="color:#cc6666">15px </span> <span style="color:#cc6666">25px</span> ; <span style="color:#b294bb">字体大小</span>：<span style="color:#cc6666">16px</span> ; <span style="color:#b294bb">cursor</span>：指针 }</span></span>在下面的屏幕截图中，您可以看到我们的演示此时的样子。由于顶部菜单栏和折叠标题均位于固定位置，因此它们位于页面顶部并覆盖内容的上部。在接下来的步骤中，我们将通过样式化其余内容来使标题可折叠。
7.设置其余内容的样式
要使标题在滚动时折叠，您需要做四件事：
- 最重要的是，您需要为其余内容设置背景，以便它可以在可折叠标题的顶部流动。请记住，该效果与视差效果类似；不同的背景需要相互掩盖。
- 在演示中，我们使用了纯白色背景。您始终需要在流动的内容上设置背景以使该效果起作用（否则，折叠的标题不会折叠）。
- 相对于两个固定元素定位内容。该顶：370px; 以下规则是<header>（70px）和.banner（300px）的高度之和。
- 将宽度设置为100％，以使内容覆盖整个标题。
- 将高度也设置为100％，这样背景将覆盖页面的整个高度（这对于移动设备或较长页面而言非常重要）。
这就是代码中的样子：
<span style="color:#273238"><span style="color:#cccccc"><span style="color:#de935f">.article</span> { <span style="color:#b294bb">宽度</span>：<span style="color:#cc6666">100％</span>； <span style="color:#b294bb">职位</span>：相对； <span style="color:#b294bb">顶部</span>：<span style="color:#cc6666">370px</span> ; <span style="color:#b294bb">背景</span>：白色； <span style="color:#b294bb">高度</span>：<span style="color:#cc6666">100％</span> ; <span style="color:#b294bb">填充</span>：<span style="color:#cc6666">30px </span> <span style="color:#cc6666">10％</span> ; } <span style="color:#de935f">.article </span> <span style="color:#81a2be">p</span> {{ <span style="color:#b294bb">margin-bottom</span>：<span style="color:#cc6666">20px</span> ; }</span></span>签出整个代码新建一个前端学习qun438905713，在群里大多数都是零基础学习者，大家相互帮助，相互解答，并且还准备很多学习资料，欢迎零基础的小伙伴来一起交流。
并且，折叠头完成。在下面，您可以查看整个CSS。您还可以查看本文中显示的折叠标题效果的实时演示。
<span style="color:#273238"><span style="color:#cccccc">* { <span style="color:#b294bb">box-sizing</span>：border-box; <span style="color:#b294bb">边距</span>：<span style="color:#cc6666">0</span> ; <span style="color:#b294bb">填充</span>：<span style="color:#cc6666">0</span> ; <span style="color:#b294bb">字体家族</span>：sans-serif; <span style="color:#b294bb">颜色</span>：<span style="color:#cc6666">＃222</span> ; } <span style="color:#81a2be">a</span> { <span style="color:#b294bb">文本修饰</span>：无； } <span style="color:#81a2be">ul</span> { <span style="color:#b294bb">list-style-type</span>：none; } <span style="color:#81a2be">标头</span> { <span style="color:#b294bb">高度</span>：<span style="color:#cc6666">70像素</span> ; <span style="color:#b294bb">背景</span>：<span style="color:#cc6666">＃222</span> ; <span style="color:#b294bb">位置</span>：固定； <span style="color:#b294bb">宽度</span>：<span style="color:#cc6666">100％</span> ; <span style="color:#b294bb">z索引</span>：<span style="color:#cc6666">99</span>； } <span style="color:#81a2be">导航</span> { <span style="color:#b294bb">高度</span>：继承; } <span style="color:#de935f">.menu</span> { <span style="color:#b294bb">display</span>：flex; <span style="color:#b294bb">高度</span>：继承； <span style="color:#b294bb">align-items</span>：中心; <span style="color:#b294bb">填充</span>：<span style="color:#cc6666">0 </span> <span style="color:#cc6666">20px</span> ; } <span style="color:#de935f">.menu </span> <span style="color:#81a2be">li</span> { <span style="color:#b294bb">padding</span>：<span style="color:#cc6666">0 </span> <span style="color:#cc6666">10px</span> ; } <span style="color:#de935f">.menu </span> <span style="color:#81a2be">a</span> { <span style="color:#b294bb">颜色</span>：白色； } <span style="color:#de935f">.logo</span> { <span style="color:#b294bb">flex</span>：<span style="color:#cc6666">1</span> ; <span style="color:#b294bb">字体大小</span>：<span style="color:#cc6666">22px</span> ; } <span style="color:#de935f">.banner</span> { <span style="color:#707880">/ *用于定位* / </span> <span style="color:#b294bb">宽度</span>：<span style="color:#cc6666">100％</span> ; <span style="color:#b294bb">高度</span>：<span style="color:#cc6666">300px</span> ; <span style="color:#b294bb">位置</span>：固定； <span style="color:#b294bb">顶部</span>：<span style="color:#cc6666">70px</span> ; <span style="color:#b294bb">背景</span>：<span style="color:#de935f">线性渐变</span>（45deg，＃98cbff，＃98ffcb）; <span style="color:#707880">/ *用于内容对齐* / </span> <span style="color:#b294bb">display</span>：flex; <span style="color:#b294bb">flex-direction</span>：列; <span style="color:#b294bb">证明内容</span>：空间均匀； <span style="color:#b294bb">align-items</span>：中心; } <span style="color:#de935f">.banner-title</span> { <span style="color:#b294bb">font-size</span>：<span style="color:#cc6666">32px</span> ; <span style="color:#b294bb">底边距</span>：<span style="color:#cc6666">10px</span> ; <span style="color:#b294bb">text-align</span>：center; } <span style="color:#de935f">.banner-desc</span> { <span style="color:#b294bb">font-size</span>：<span style="color:#cc6666">22px</span> ; <span style="color:#b294bb">text-align</span>：center; } <span style="color:#de935f">.btn-signup</span> { <span style="color:#b294bb">颜色</span>：白色； <span style="color:#b294bb">背景颜色</span>：<span style="color:#cc6666">＃0056ab</span> ; <span style="color:#b294bb">边界</span>：<span style="color:#cc6666">0</span> ; <span style="color:#b294bb">填充</span>：<span style="color:#cc6666">15px </span> <span style="color:#cc6666">25px</span> ; <span style="color:#b294bb">字体大小</span>：<span style="color:#cc6666">16px</span> ; <span style="color:#b294bb">cursor</span>：指针 } <span style="color:#de935f">.article</span> { <span style="color:#b294bb">宽度</span>：<span style="color:#cc6666">100％</span>； <span style="color:#b294bb">职位</span>：相对； <span style="color:#b294bb">顶部</span>：<span style="color:#cc6666">370px</span> ; <span style="color:#b294bb">背景</span>：白色； <span style="color:#b294bb">高度</span>：<span style="color:#cc6666">100％</span> ; <span style="color:#b294bb">填充</span>：<span style="color:#cc6666">30px </span> <span style="color:#cc6666">10％</span> ; } <span style="color:#de935f">.article </span> <span style="color:#81a2be">p</span> {{ <span style="color:#b294bb">margin-bottom</span>：<span style="color:#cc6666">20px</span> ; }</span></span>结论
折叠标题为您提供了一种用户友好的方式，可在页面顶部显示其他内容。它们的作用类似于视差效果。您需要使不同的背景以不同的速度移动，并使流动的内容相对于固定的元素定位。
