1.属性介绍:
sticky定位(粘性定位),指的是基于用户的滚动位置来定位,默认情况下它表现就和relative定位一样,但是当页面滚动区域大于你的目标区域(即sticky对应的元素区域)时,它的表现和fixed定位一样。
元素定位也同样需要根据所设定的top,left,right,bottom来呈现。
2.sticky定位的缺点:
存在兼容性问题
Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位。 Safari 需要添加-webkit前缀。
3.案例:
<!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>sticky</title> <style>.userList-title{padding: 10px;background-color: greenyellow;position: -webkit-sticky;position: sticky;top:0;}.user-list-item{padding: 10px;background: pink;}.user-list-item:nth-child(odd){background-color: coral;}.phone{margin-top: 10px;}</style></head><body><div class="userList-title">用户列表</div><div class="user-list-item"><div class="username">张三</div><div class="phone">18989898989</div></div>.....此处省略n个列表项<div class="user-list-item"><div class="username">张三</div><div class="phone">18989898989</div></div></body></html>