2-15 position-sticky
来源：2-15 position-sticky（了解即可）
小睡妃
2018-09-27 20:22:51
和老师的不一致，没有出现sticky效果
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>position-sticky</title>
<link rel="stylesheet" href="./reset.css">
<style>
.logo {
width: 100%;
height: 50px;
background: gray;
}
.nav {
position: sticky;
top: 0;
width: 100%;
height: 50px;
background: blue;
color: #ffffff;
cursor: pointer;
}
</style>
</head>
<body>
<div class="con">
<div class="logo">
想象我是网站头图
</div>
<div class="nav">
想象这里是一堆的 banner 导航按钮 | 分享 | 收藏
</div>
</div>
<p>
假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字
</p>
<p>
假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字
</p>
<p>
假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字
</p>
<p>
假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字
</p>
<p>
假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字
</p>
<p>
假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字
</p>
<p>
假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字
</p>
</div>
</body>
</html>
1回答
-
代码中多了一个div结束标签，直接去掉就可以了。建议：可以适当增加一些正文内容，让浏览器出现滚动条，这样可以更能直观的观察效果。如下图：
0
相似问题
回答 1
回答 2