sticky 的本意是粘糊糊的，但在 css 中的表现更像是吸附。常见的吸顶、吸底（移动端网站的头部返回栏，底部切换栏之类）的效果用这个属性非常适合。
也许你会遇到的坑
1、sticky 不会触发 BFC。
2、z－index 无效。
3、sticky 是容器相关的，也就说 sticky 的特性只会在他所处的容器里生效
实例
html页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="boxOne">
<p>this is boxOne</p>
<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates quasi quidem asperiores,
corporis sint ex sequi, totam quas libero praesentium dignissimos quos, omnis nihil iure temporibus
voluptate officiis beatae sapiente cupiditate aut alias laborum porro doloremque. Neque necessitatibus
error reprehenderit quidem atque aliquid sint, earum aperiam soluta. Nihil perspiciatis fugiat, quasi
quidem illum totam tempora eveniet aspernatur eos, repudiandae vel laborum. Aperiam assumenda explicabo
voluptatem dolor at quibusdam, voluptates dolorum fugit recusandae adipisci rem autem maiores, nesciunt
consequatur. Veritatis aliquam recusandae modi autem, numquam, earum tenetur voluptates quos officia
magni unde dolore, nam repudiandae odit accusantium quam sed impedit est.
</span>
</div>
<div class="boxTwo">
<p>this is boxTwo</p>
<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates quasi quidem asperiores,
corporis sint ex sequi, totam quas libero praesentium dignissimos quos, omnis nihil iure temporibus
voluptate officiis beatae sapiente cupiditate aut alias laborum porro doloremque. Neque necessitatibus
error reprehenderit quidem atque aliquid sint, earum aperiam soluta. Nihil perspiciatis fugiat, quasi
quidem illum totam tempora eveniet aspernatur eos, repudiandae vel laborum. Aperiam assumenda explicabo
voluptatem dolor at quibusdam, voluptates dolorum fugit recusandae adipisci rem autem maiores, nesciunt
consequatur. Veritatis aliquam recusandae modi autem, numquam, earum tenetur voluptates quos officia
magni unde dolore, nam repudiandae odit accusantium quam sed impedit est.
</span>
</div>
<div class="boxThree">
<p>this is boxThree</p>
<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates quasi quidem asperiores,
corporis sint ex sequi, totam quas libero praesentium dignissimos quos, omnis nihil iure temporibus
voluptate officiis beatae sapiente cupiditate aut alias laborum porro doloremque. Neque necessitatibus
error reprehenderit quidem atque aliquid sint, earum aperiam soluta. Nihil perspiciatis fugiat, quasi
quidem illum totam tempora eveniet aspernatur eos, repudiandae vel laborum. Aperiam assumenda explicabo
voluptatem dolor at quibusdam, voluptates dolorum fugit recusandae adipisci rem autem maiores, nesciunt
consequatur. Veritatis aliquam recusandae modi autem, numquam, earum tenetur voluptates quos officia
magni unde dolore, nam repudiandae odit accusantium quam sed impedit est.
</span>
</div>
<div class="boxFour">
<p>this is boxFour</p>
<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates quasi quidem asperiores,
corporis sint ex sequi, totam quas libero praesentium dignissimos quos, omnis nihil iure temporibus
voluptate officiis beatae sapiente cupiditate aut alias laborum porro doloremque. Neque necessitatibus
error reprehenderit quidem atque aliquid sint, earum aperiam soluta. Nihil perspiciatis fugiat, quasi
quidem illum totam tempora eveniet aspernatur eos, repudiandae vel laborum. Aperiam assumenda explicabo
voluptatem dolor at quibusdam, voluptates dolorum fugit recusandae adipisci rem autem maiores, nesciunt
consequatur. Veritatis aliquam recusandae modi autem, numquam, earum tenetur voluptates quos officia
magni unde dolore, nam repudiandae odit accusantium quam sed impedit est.
</span>
</div>
<div class="boxFive">
<p>this is boxFive</p>
<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates quasi quidem asperiores,
corporis sint ex sequi, totam quas libero praesentium dignissimos quos, omnis nihil iure temporibus
voluptate officiis beatae sapiente cupiditate aut alias laborum porro doloremque. Neque necessitatibus
error reprehenderit quidem atque aliquid sint, earum aperiam soluta. Nihil perspiciatis fugiat, quasi
quidem illum totam tempora eveniet aspernatur eos, repudiandae vel laborum. Aperiam assumenda explicabo
voluptatem dolor at quibusdam, voluptates dolorum fugit recusandae adipisci rem autem maiores, nesciunt
consequatur. Veritatis aliquam recusandae modi autem, numquam, earum tenetur voluptates quos officia
magni unde dolore, nam repudiandae odit accusantium quam sed impedit est.
</span>
</div>
</body>
</html>
css样式：
p{
position: sticky;
top: 0;
background: red;
}
效果：
GIF.gif
网友评论