前言:
css3中有一个很有趣的属性position:sticky,粘性属性,效果是一个吸顶效果,可以说是相对定位relative和固定定位fixed的结合;它主要用在对scroll事件的监听上;简单来说,在滑动过程中,某个元素距离其父元素的距离达到sticky粘性定位的要求时
(比如top:100px);position:sticky这时的效果相当于fixed定位,固定到适当位置。
***注意,这个兼容性特别不好
效果图:
基本用法:
nav{
position:sticky;
top:10px; /* 阈值 */
}
top/bottom属性
top
,bottom
的距离阈值取决于最近一个overflow
是hidden
scroll
auto
或 overlay
的祖先元素(并不是相对于viewport 视口)。
例如我们设置top:100px
时,在元素滚动到距离祖先元素顶部小于设置的top:100px
之前,元素为相对定位。当滚动到超过或等于top:100px
时,元素将固定在与祖先元素顶部距离 top:100px
的相对位置,直到距离回滚到阈值以下。
根据下面的例子,我们可以看到position:sticky
元素设置的top值是最近一个设置了overflow
的祖先元素的距离,当它滚到距离低于其值时将固定在视口当中,此时该元素的效果就为固定定位。
总结
top
、bottom
的生效距离由最近一个overflow
属性是hidden
scroll
auto
或overlay
的祖先元素决定。- 父元素为
overflow:hidden
时,由于容器内无法滚动,所以实际上也无法生效。 - 必须指定
top
、bottom
、left
、right
4个值之一,否则只会处于相对定位。 - 父元素的高度不能低于sticky元素的高度。
兼容:
position: -webkit-sticky;
position: sticky;
案例代码:(可运行)
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
.container {
display: flex;
}
.right {
border: 1px solid red;
width: 100%;
margin-top: 40px;
overflow: scroll;
height: 400px;
}
nav {
position: sticky;
top: 100px;
}
</style>
</head>
<body>
<div class="container">
<div class="right">
<h1 style="height:200px;">顶部高200px 红线为中线</h1>
<nav style="background: red;">这是导航 top:100px</nav>
<p>滚一个</p>
<p>滚一个</p>
<p>滚一个</p>
<p>滚一个</p>
<p>滚一个</p>
<p>滚一个</p>
<p>滚一个</p>
<p>滚一个</p>
<p>滚一个</p>
<p>滚一个</p>
<p>滚一个</p>
<p>滚一个</p>
<p>滚一个</p>
<p>滚一个</p>
<p>滚一个</p>
<p>滚一个</p>
<p>滚一个</p>
<p>滚一个</p>
<p>滚一个</p>
<p>滚一个</p>
<p>滚一个</p>
<p>滚一个</p>
<p>滚一个</p>
<p>滚一个</p>
<p>滚一个</p>
<p>滚一个</p>
<p>滚一个</p>
<p>滚一个</p>
<p>滚一个</p>
<p>滚一个</p>
<p>到底啦!</p>
</div>
</div>
</body>
</html>