介绍
实现页面的 header 头部元素滚动固定
# 效果预览
- 经常能看到一些页面 他们的顶部导航随着滚动而固定在页面上 像这样 或者来这里看效果 (opens new window)
# 实现代码
- 通常会用JS来监听实现这种效果 我们用纯Css来实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<header>
<div class="header-inner">
LOGO
</div>
</header>
<main>
<div style="height: 3000px;"></div>
</main>
</body>
<style>
:root {
--height-outer: 120px;
--height-inner: 60px;
}
body {
background-color: #eee;
margin: 0;
}
header {
display: flex;
align-items: center;
position: sticky;
height: var(--height-outer);
top: calc(var(--height-inner) - var(--height-outer));
border-bottom: 1px solid #ccc;
background-color: #fff;
}
.header-inner {
display: flex;
line-height: var(--height-inner);
width: 980px;
max-width: calc(100% - 2rem);
margin: 0 auto;
justify-content: space-between;
position: sticky;
top: 0;
}
</style>
</html>
具体实现描述如下:
外层元素粘性定位,设置 top 属性值为负的内外高度的差值,内层元素也是粘性定位,设置 top 属性值为 0,保证吸顶效果。