2-13 position-sticky 的问题
来源：2-15 position-sticky（了解即可）
Snowy丶
2018-03-08 15:34:39
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body{
height:800px;
overflow: auto;
}
.logo{
width: 100%;
height:50px;
background: gray;
}
.nav{
position: sticky;
top:0px;
width: 100%;
height: 50px;
background: blue;
color: #ffffff;
cursor: pointer;
}
.content{
position: relative;
height: 150px;
overflow: scroll;
}
</style>
</head>
<body>
<div class="logo">
想象我是网站头图
</div>
<div class="content">
<P>假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字
假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字
假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字
</P>
<P>假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字
假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字
假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字
</P>
<div class="nav">
想象这里是一堆的bannner 导航按钮|编辑|发布|
</div>
<div>
<p>假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字
假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字
假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字
</p>
<p>假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字
假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字
假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字
</p>
<p>假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字
假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字
假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字
</p>
<p>假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字
假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字
假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字
</p>
<p>假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字
假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字
假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字
</p>
<p>假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字
假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字
假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字
</p>
<p>假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字
假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字
假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字
</p>
<p>假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字
假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字
假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字
</p>
<p>假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字
假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字
假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字
</p>
<p>假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字
假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字
假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字
</p>
<p>假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字
假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字
假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字
</p>
<p>假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字
假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字
假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字
</p>
<p>假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字
假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字
假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字
</p>
</div>
</div>
</body>
</html>为什么我自己手动敲了一次却不能实现吸附效果？是我代码出了问题吗 还是浏览器兼容性问题？ 我用360极速浏览器打开的
写回答
4回答
-
position:sticky是css3的新属性，兼容性不太乐观呢，建议还是在主流浏览器，例如：谷歌，火狐上测试。
0 -
慕哥7428920
2018-03-11
可以尝试换一下浏览器，因为sticky有兼容性差的特点~~~
0 -
人生漫慢
2018-03-08
滚动效果针对.content的div,你在此div里滚动是有效果的
0 -
人生漫慢
2018-03-08
把你的代码在谷歌上展示是可以实现吸附效果的，你试试
0
相似问题