关于position的sticky定位的介绍

前端时间浏览阮神的博客发现position居然还有个sticky这种神奇的定位，马上试了试，简单好用，一些简单的，比如说手机京东网页的吸附效果就可以使用sticky快速做好。

1、sticky的效果

sticky有粘性的意思，所以sticky定位也可以称为粘性定位。从名字就可以看出这个定位常用于一些吸附功能。例如下面这个京东的页面，页面向上滑动的时候搜索框会从相对定位变成固定定位，使得其在用户浏览页面的时候搜索框一直固定在顶部，便于用户使用。

以前我们要做到这种效果，必须借助JavaScript，有了sticky我们就可以两行代码实现这个效果了。
html部分

<div class="app"></div>
<div class="search-wraper"></div>
<div class="container">这是其余部分</div>

css部分

* {
    margin: 0;
      padding: 0;
  }

body {
    max-width: 750px;
    height: 3000px;
    margin: 0 auto;
}

.app {
    height: 40px;
    background-color: skyblue;
}

.search-wraper {
    position: sticky;
    top: 0;
    /*上面两行代码就实现了京东的吸附效果*/
    height: 30px;
    background-color: #ccc;
}

.container {
    height: 100vh;
    background-color: pink;
}

神奇吧？下面就介绍一下这个神奇的定位。

2、sticky的简单介绍

sticky定位虽然神奇，但是原理却非常简单，它是相对定位和固定定位的集合，在不同条件下显示不同的定位效果。当判断设置了sticky定位的元素边界和视口边界的距离小于设置top、bottom、left、right值，且父级元素一部分位于视口内，一部分位于视口外时，就显示固定定位的效果，其余情况显示相对定位的效果。

p {
	position: sticky;
	top: 20px;
}

上面的代码即显示，初始时p标签为相对定位，当页面向上滚动时，如果p标签的上边界和视口上边界距离小于20px时，p标签变为固定定位，当父级元素完全位于视口范围外时，又变为相对定位。
注：sticky必须和top、bottom、left、right搭配使用，否则没有效果。

3、参考链接

[1] 阮一峰.CSS定位详解