如何使用纯CSS创建折叠标题效果

折叠标题是向用户显示重要信息（例如特价商品和关键通知）的绝佳解决方案。许多开发人员在创建这种效果时都依赖JavaScript，但是，完全可以使用纯CSS创建更简单的折叠标头效果。

折叠的标题与视差效果相似。折叠标题的背景保持固定，以便当用户向下滚动页面时，其下方的内容可以在其顶部流动。在本教程中，我们将向您展示如何创建以下折叠的标题效果：

 

该演示包括三个部分：

1. 固定标题为黑色背景，位于页面顶部，包括主菜单。
2. 具有蓝色背景的折叠标题，其中包含有关特价的额外信息。
3. 用户滚动到折叠的标题上的带有白色背景的其余内容。

折叠标题非常适合用户体验。用户可以在想要查看特殊信息的任何时候随时向后滚动页面，但是在阅读其余内容时不会分散注意力。新建一个前端学习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> &l