position:sticky是 CSS 3.0新增的定位属性，可以说是相对定位relative和固定定位fixed的结合，它主要用在对scroll事件的监听上，简单来说，在滚动过程中，元素距离其父元素的距离达到sticky粘性定位的要求时，效果会变成fixed定位，固定到适当位置，下面给大家看一个效果。
这个属性用的概率比较小，不过在特定的场合，它真是个好东西，不用写那么复杂的JS，以下是代码实现。
代码语言：javascript复制<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 3.0粘性定位的妙用</title>
<style>
* {
margin: 0;
padding: 0;
font-family: '微软雅黑', sans-serif;
box-sizing: border-box;
}
.banner {
position: relative;
width: 100vw;
height: 100vh;
}
.banner img {
width: 100%;
height: 100%;
}
section:nth-child(2n 1) {
position: relative;
height: auto;
background: #fafafa;
display: flex;
flex-direction: row-reverse;
}
section:nth-child(2n 2) {
position: relative;
height: auto;
background: #fafafa;
display: flex;
}
section .img-box {
/* 关键属性 */
position: sticky;
top: 0;
min-width: 50%;
height: 100vh;
}
section .img-box img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-width: 600px;
}
section:nth-child(2n 1) .content {
padding: 100px 0 100px 100px;
text-align: right;
}
section:nth-child(2n 2) .content {
padding: 100px 100px 100px 0;
text-align: left;
}
section .content h2 {
margin: 0 0 20px;
font-size: 60px;
}
section .content p {
color: #777;
font-size: 20px;
margin-bottom: 20px;
}
</style>
</head>
<body>
<div class="banner">
<img src="banner.png">
</div>
<div id="box">
<section>
<div class="img-box">
<img src="img.png">
</div>
<div class="content">
<h2>Apple Watch</h2>
<p>
Apple Watch是苹果公司于2014年9月公布出来的智能手表，分为运动款、普通款和定制款三种，采用蓝宝石屏幕，有银色，金色，红色，绿色和白色等多种颜色可以选择
</p>
<p>
Apple Watch是苹果公司于2014年9月公布出来的智能手表，分为运动款、普通款和定制款三种，采用蓝宝石屏幕，有银色，金色，红色，绿色和白色等多种颜色可以选择
</p>
<p>
Apple Watch是苹果公司于2014年9月公布出来的智能手表，分为运动款、普通款和定制款三种，采用蓝宝石屏幕，有银色，金色，红色，绿色和白色等多种颜色可以选择
</p>
<p>
Apple Watch是苹果公司于2014年9月公布出来的智能手表，分为运动款、普通款和定制款三种，采用蓝宝石屏幕，有银色，金色，红色，绿色和白色等多种颜色可以选择
</p>
<p>
Apple Watch是苹果公司于2014年9月公布出来的智能手表，分为运动款、普通款和定制款三种，采用蓝宝石屏幕，有银色，金色，红色，绿色和白色等多种颜色可以选择
</p>
<p>
Apple Watch是苹果公司于2014年9月公布出来的智能手表，分为运动款、普通款和定制款三种，采用蓝宝石屏幕，有银色，金色，红色，绿色和白色等多种颜色可以选择
</p>
<p>
Apple Watch是苹果公司于2014年9月公布出来的智能手表，分为运动款、普通款和定制款三种，采用蓝宝石屏幕，有银色，金色，红色，绿色和白色等多种颜色可以选择
</p>
<p>
Apple Watch是苹果公司于2014年9月公布出来的智能手表，分为运动款、普通款和定制款三种，采用蓝宝石屏幕，有银色，金色，红色，绿色和白色等多种颜色可以选择
</p>
<p>
Apple Watch是苹果公司于2014年9月公布出来的智能手表，分为运动款、普通款和定制款三种，采用蓝宝石屏幕，有银色，金色，红色，绿色和白色等多种颜色可以选择
</p>
</div>
</section>
</div>
<script>
// 加点内容
let box = document.getElementById('box');
for(let i=0;i<2;i ){
box.innerHTML =box.innerHTML;
};
</script>
</body>
</html>以下是上面代码中用到的图片。
img.png
banner.png
