粘性定位之CSS （ position: sticky ）实现
站长
· 阅读数 7
前言
在项目中，我们常常会碰上这么个效果，就是当页面滚动时，我们要使某个元素（如导航栏、侧边栏、表态之类的）滚动到指定的位置不再滚动。要想实现这个效果，就得用到接下来所讲述的粘性定位。
实现方法
常见的实现粘性定位的方法有两种
-
- 使用 CSS 属性
position: sticky实现
- 使用 CSS 属性
-
- 使用 JavaScript 监听滚动事件实现
本文将主要讲述一下怎么利用position: sticky来实现粘性定位
CSS 属性 position: sticky实现粘性定位
步骤
- 确定粘性元素，给其添加
position: sticky属性 - 确定触发粘性行为的位置，即你希望它滚动到哪个位置不再滚动，如
top:0;（注意：这里的top:0;是相对于离该元素最近的具有滚动条的祖先元素，一般是视窗）
注意事项
- 父元素的
overflow属性：如果粘性元素的任何父级元素设置了overflow: hidden、overflow: scroll或overflow: auto属性，那么position: sticky;可能不会生效。请确保粘性元素的所有父级元素没有这些overflow设置。 - 祖先元素的高度限制：如果粘性元素的任何祖先元素具有固定的高度或最大高度，并且该元素的内容高度超出了这个限制，粘性布局可能也不会生效。
- 兼容性问题：虽然现代浏览器普遍支持
position: sticky;，但在一些旧版本的浏览器中仍然可能存在兼容性问题。确保您的浏览器版本支持粘性定位。 - Z-index问题：在某些情况下，如果页面上其他元素的
z-index较高，可能会覆盖或影响粘性元素的可见性。 - 何时失效：当粘性元素的边缘和父元素的临界元素边缘重合时，会随着父元素一起滚走，这时粘性就失效了
如下示例：
<style>
*{
margin: 0;
padding: 0;
}
body{
height: 3000px;
}
.nav{
background-color: pink;
height: 100px;
width: 100%;
text-align: center;
line-height: 100px;
}
ul{
list-style: none;
text-align: center;
}
li{
height: 50px;
width: 100%;
background-color: #666;
line-height: 50px;
}
.title{
background-color: rgb(0, 179, 255);
font-weight: bold;
position: sticky;
top: 0px;
}
</style>
<body>
<div class="nav">
<span>头部</span>
</div>
<div class="content">
<ul>
<li class="title">内容一</li>
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
<ul>
<li class="title">内容二</li>
<li>d</li>
<li>e</li>
<li>f</li>
</ul>
<ul>
<li class="title">内容三</li>
<li>g</li>
<li>h</li>
<li>i</li>
</ul>
</div>
</body>
效果
滚动之前
粘性元素到达指定位置，即top: 0;
粘性元素边缘和父元素的临界元素边缘重合，粘性元素随着父元素滚走
