sticky是什么
sticky是粘性布局匕坯，他是結(jié)合positiong:relative和potion:fixed；這兩種定位于一體的特殊定位
效果圖
效果.gif
怎么用
<!DOCTYPE html>
<html lang="zh">
<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>sticky</title>
<style>
*{
margin: 0;
padding: 0;
}
li{
list-style: none;
}
img{
width: 100%;
}
.slite-top{
height: 50px;
line-height: 50px;
font-size: 20px;
padding-left: 20px;
border-bottom: 1px solid #6E6E6E;
}
.content-skicty{
height: 1300px;
margin: 0 auto;
}
.content-skicty p{
position: -webkit-sticky;
position: sticky;
top: 0;
height: 50px;
margin-bottom: 20px;
color: #fff;
background: #E6A200;
line-height: 50px;
text-align: center;
}
</style>
</head>
<body>
<div class="box">
<div class="slite-top">
<span>導(dǎo)航</span>
</div>
<div class="content-skicty">
<p style="background: #10AEFF;">內(nèi)容1</p>
<p style="background:#657180;">內(nèi)容2</p>
<p>內(nèi)容3</p>
<p style="background: #A1A1A1;">內(nèi)容4</p>
<p style="background: #B7D0E1;">內(nèi)容5</p>
<p style="background: #B2B2B2;">內(nèi)容6</p>
<p style="background: #D74747;">內(nèi)容7</p>
<p style="background: #4CD864;">內(nèi)容8</p>
<p style="background: #D74747;">內(nèi)容9</p>
</div>
</div>
</body>
</html>
