实现头部导航栏固定
用到的属性是:
position:sticky
- 粘性定位元素(stickily positioned element)是计算后位置属性为
sticky
的元素。 -
sticky
盒位置根据正常流计算(这称为正常流动中的位置),然后相对于该元素在流中的 flow root(BFC)和 containing block(最近的块级祖先元素)定位。在所有情况下(即便被定位元素为 table 时
),该元素定位均不对后续元素造成影响。当元素 B 被粘性定位时,后续元素的位置仍按照 B 未定位时的位置来确定。position: sticky
对 table
元素的效果与 position: relative
相同。
MDN的解释:https://developer.mozilla.org/zh-CN/docs/Web/CSS/position
首先给任意父节点设置:verflow:visible;
如果是 overflow:hidden的话,那就无法滚动了
例子:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Demo</title>
</head>
<body>
<div id="container">
<table>
<thead>
<tr>
<th class="theadSticky">ID</th>
<th class="theadSticky">Name</th>
<th class="theadSticky">Gender</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Tom</td>
<td>Male</td>
</tr>
<tr>
<td>2</td>
<td>Abbott</td>
<td>Male</td>
</tr>
<tr>
<td>3</td>
<td>Alan</td>
<td>Female</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
css:
#container{
background: #eee;
width: 150px;
height: 1000px;
overflow:visible;
border:1px solid red;
}
.theadSticky{
position:sticky;
top:10px;
}
table{
border:1px solid red;
}
效果图: