折叠标题是向用户显示重要信息的绝佳解决方案,例如特价优惠和密钥通知。许多开发人员在建立此类效果时依赖JavaScript,可是,使用纯CSS建立更简单的折叠头效果也是彻底可能的。bash
折叠标题的工做方式相似于视差效果。折叠标题的背景保持固定,以便当用户向下滚动页面时,其下方的内容能够在其上方流动。在本教程中,咱们将向你展现如何建立如下折叠标题效果:布局
该演示包括三个部分:flex
折叠标头很是适合用户体验。用户能够在想要查看特殊信息时随时滚动页面,但在阅读其他内容时不会分散他们的注意力。ui
如今,让咱们看看如何逐步建立折叠标题。flexbox
HTML包括三个主要部分:<header>
用于固定顶部菜单栏中,.banner为折叠头,.article用于内容的其他部分。如下是代码的外观:spa
<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>
复制代码
让咱们经过定义一些重置和基本样式来启动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>
元素的位置设置为fixed,将z-index设置为大于零的值。因为z-index默认为auto,所以它只须要高于元素父级的z-index值。下面的CSS使用99,由于它可能会保持高于<header>
元素的任何父级:code
header {
height: 70px;
background: #222;
position: fixed;
width: 100%;
z-index: 99;
}
复制代码
z-index: 99; 规则容许顶部菜单栏保持在全部元素的顶部,即便折叠标题彻底折叠而且其他内容到达页面顶部。cdn
虽然建立折叠标题不须要如下CSS规则,但你可使用顶部菜单设置样式:blog
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元素被推到容器的左侧。
折叠标题也具备固定位置,就像顶部菜单栏同样。可是,它没有得到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属性轻松地垂直和水平对齐元素。
虽然这不是折叠标题效果的一部分,但这里是.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;
}
复制代码
在下面的屏幕截图中,你能够看到咱们的演示在此刻的样子。因为顶部菜单栏和折叠标题都有固定位置,所以它们位于页面顶部并覆盖内容的上半部分。咱们将经过设置其他内容的样式,使标题在下一步中可折叠。
要在滚动时使标题折叠,你须要作四件事:
<header>
(70px)和.banner(300px)的高度之和。这是它在代码中的样子:
.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;
}
复制代码
折叠标题为你提供了一种用户友好的方式,能够在页面顶部显示其余内容。它们的工做方式相似于视差效应; 你须要让不一样的背景以不一样的速度移动,并将流动的内容相对于固定的元素定位。