概念
position：sticky又称为粘性定位，是css3新增的。粘性定位的元素依赖于用户的滚动，在相对定位（relative）与固定定位（fixed）之间进行切换，基于位偏移的值进行偏移。
粘性定位可以被认为是相对定位和固定定位的混合
元素在跨越特定位偏移之前为相对定位，之后为固定定位
示例1：左侧滑动，右侧固定
效果演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>一侧固定一侧滚动</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 80%;
margin: 0 auto;
}
.clearfix::after {
content: "";
display: block;
overflow: hidden;
clear: both;
}
.conetnt {
padding: 2%;
border: 1px solid #eee;
margin-bottom: 50px;
box-sizing: border-box;
}
.left {
height: 3000px;
width: 60%;
margin: 0 2%;
float: left;
background-color: pink;
}
.right {
/* height: 1000px; */
width: 35%;
float: right;
background-color: purple;
/*对右边的内容使用粘性定位*/
position: sticky;
/* top: -220px; */
}
.footer {
width: 100%;
height: 300px;
background-color: #000;
color: #FFFFFF;
}
</style>
</head>
<body>
<div class="box">
<div class="conetnt clearfix">
<div class="left">
wwwwwww<br> wwwwwww<br> wwwwwww<br> wwwwwww<br> wwwwwww<br> wwwwwww<br>
wwwwwww<br> wwwwwww<br> wwwwwww<br> wwwwwww<br> wwwwwww<br> wwwwwww<br>
wwwwwww<br> wwwwwww<br> wwwwwww<br> wwwwwww<br> wwwwwww<br> wwwwwww<br>
wwwwwww<br> wwwwwww<br> wwwwwww<br> wwwwwww<br> wwwwwww<br> wwwwwww<br>
wwwwwww<br> wwwwwww<br> wwwwwww<br> wwwwwww<br> wwwwwww<br> wwwwwww<br>
wwwwwww<br> wwwwwww<br> wwwwwww<br> wwwwwww<br> wwwwwww<br> wwwwwww<br>
wwwwwww<br> wwwwwww<br> wwwwwww<br> wwwwwww<br> wwwwwww<br> wwwwwww<br>
wwwwwww<br> wwwwwww<br> wwwwwww<br> wwwwwww<br> wwwwwww<br> wwwwwww<br>
wwwwwww<br> wwwwwww<br> wwwwwww<br> wwwwwww<br> wwwwwww<br> wwwwwww<br>
wwwwwww<br> wwwwwww<br> wwwwwww<br> wwwwwww<br> wwwwwww<br> wwwwwww<br>
wwwwwww<br> wwwwwww<br> wwwwwww<br> wwwwwww<br> wwwwwww<br> wwwwwww<br>
wwwwwww<br> wwwwwww<br> wwwwwww<br> wwwwwww<br> wwwwwww<br> wwwwwww<br>
wwwwwww<br> wwwwwww<br> wwwwwww<br> wwwwwww<br> wwwwwww<br> wwwwwww<br>
wwwwwww<br> wwwwwww<br> wwwwwww<br> wwwwwww<br> wwwwwww<br> wwwwwww<br>
wwwwwww<br> wwwwwww<br> wwwwwww<br> wwwwwww<br> wwwwwww<br> wwwwwww<br>
wwwwwww<br> wwwwwww<br> wwwwwww<br> wwwwwww<br> wwwwwww<br> wwwwwww<br>
wwwwwww<br> wwwwwww<br> wwwwwww<br> wwwwwww<br> wwwwwww<br> wwwwwww<br>
wwwwwww<br> wwwwwww<br> wwwwwww<br> wwwwwww<br> wwwwwww<br> wwwwwww<br>
wwwwwww<br> wwwwwww<br> wwwwwww<br> wwwwwww<br> wwwwwww<br> wwwwwww<br>
wwwwwww<br>
</div>
<div class="right">
q<br> q<br> q<br> q<br> q<br> q<br> q<br> q<br> q<br> q<br> q<br> q<br> q<br> q<br> q<br>
q<br> q<br> q<br> q<br> q<br> q<br> q<br> q<br> q<br> q<br> q<br> q<br> q<br> q<br> q<br>
q<br> q<br> q<br> q<br> q<br> q<br> q<br> q<br> q<br> q<br> q<br> q<br> q<br> q<br> q<br>
q<br> q<br> q<br> q<br> q<br> q<br> q<br> q<br> 我是最后一行<br>
</div>
</div>
<div class="footer"> 我是页脚 </div>
</div>
</body>
</html>
<script>
//获得页面卷曲的内容
//获得浏览器的内部高度
let ScreenTop = window.innerHeight;
//获取滚动元素的高度
let divTop = document.querySelector(".right").offsetHeight;
let tops = divTop - ScreenTop + 20;
console.log("tops", tops);
if (tops <= 0) {
document.querySelector(".right").style.top = 0 + "px"
} else {
document.querySelector(".right").style.top = -tops + "px"
}
</script>
示例2：某行文字滑动到顶部后，固定不动，可用来做吸顶效果
<style>
*{margin:0;padding:0;}div{margin:20px;height: 20px;line-height: 30px;}
</style>
<div>这是一行文字</div>
<div>这是一行文字</div>
<div>这是一行文字</div>
<div>这是一行文字</div>
<div>这是一行文字</div>
<div>这是一行文字</div>
<div>这是一行文字</div>
<div>这是一行文字</div>
<div>这是一行文字</div>
<p id="target" style="top: 40px;background-color: blueviolet;color: #fff;width: 120px;">粘性布局的文字</p>
</div>
<div>这是一行文字</div>
<div>这是一行文字</div>
<div>这是一行文字</div>
