css- sticky
2019-11-19 本文已影响0人
AAA前端
-
有时候我们有需求需要开始有一行在页面上，然后页面滚动到需要展示的一行下面时，把展示一行固定到顶部，滚动回去，固定行又回到文档中。类似淘宝里面的服装、鞋履、箱包这种分类导航。
-
以前实现使用的监听滚动事件，判断滚动到固定行下面的时候，添加fixed。实现置顶。
*现在css有个position: sticky;可以实现。需要配合 top,right,bottom, left才能生效。没有的话，只算realtive效果。
以下是代码：
<!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>
<style>
div{
height: 100px;
background-color: pink;
margin: 10px 0;
}
.sticky{
background-color: #f00;
position: sticky;
top: 20px;
}
</style>
<body>
<div>dlkjfdsljfskdj</div>
<div>dlkjfdsljfskdj</div>
<div>dlkjfdsljfskdj</div>
<div>dlkjfdsljfskdj</div>
<div>dlkjfdsljfskdj</div>
<div class="sticky">我是sticky行</div>
<div>k3n4423423432</div>
<div>k3n4423423432</div>
<div>k3n4423423432</div>
<div>k3n4423423432</div>
<div>k3n4423423432</div>
<div>k3n4423423432</div>
<div>k3n4423423432</div>
<div>k3n4423423432</div>
<div>k3n4423423432</div>
<div>k3n4423423432</div>
<div>k3n4423423432</div>
<div>k3n4423423432</div>
<div>k3n4423423432</div>
<div>k3n4423423432</div>
<div>k3n4423423432</div>
<div>k3n4423423432</div>
<div>k3n4423423432</div>
<div>k3n4423423432</div>
<div>k3n4423423432</div>
<div>k3n4423423432</div>
</body>
</html>
滚动前：
屏幕快照 2019-11-19 上午10.05.50.png
滚动下面：
屏幕快照 2019-11-19 上午10.06.46.png
Can I Use:
屏幕快照 2019-11-19 上午10.07.23.png
