?经常使用的定位方式是?position: relative;position: absolute;?position: fixed;很少有用到position: sticky，遇到一个需求是随着页面的滚动，当滚动某个标题位置时，该标题要固定到页面顶部。想到了监听界面滚动等方法实现起来比较复杂，最后才想到粘性定位。感受到粘性定位的强大之后决定记录下来。
粘性定位就是当页面滚动到某个元素设置的条件时，该元素就会固定在某个位置不在随页面继续滚动，一直到条件不满足时再继续跟随页面滚动。
使用方法：为元素添加position: sticky属性，并且设置top|right|bottom|?left的值。
粘性定位初体验
<template>
<div class="container-wrap">
<div class="left-box-wrap">
<div class="left-item-wrap item-wrap">1</div>
<div class="left-item-wrap item-wrap">2</div>
<div class="left-item-wrap item-wrap">3</div>
<div class="left-item-wrap item-wrap">4</div>
<div class="left-item-wrap item-wrap">5</div>
<div class="left-item-wrap item-wrap">6</div>
<div class="left-item-wrap item-wrap">7</div>
<div class="left-item-wrap item-wrap">8</div>
<div class="left-item-wrap item-wrap">9</div>
<div class="left-item-wrap item-wrap">10</div>
</div>
<div class="right-box-wrap">
<div class="right-item-wrap item-wrap">粘性定位1</div>
<div class="right-item-wrap item-wrap">粘性定位2</div>
<div class="right-item-wrap item-wrap">粘性定位3</div>
<div class="right-item-wrap item-wrap">粘性定位4</div>
<div class="right-item-wrap item-wrap sticky1-wrap">粘性定位5</div>
<div class="right-item-wrap item-wrap sticky2-wrap">粘性定位6</div>
</div>
</div>
</template>
<script>
export default {
name: "StickyDemo",
};
</script>
<style scoped>
.container-wrap {
display: flex;
}
.left-box-wrap {
flex: 3;
background-color: #ccc;
}
.right-box-wrap {
flex: 2;
background-color: #eee;
}
.item-wrap {
display: flex;
justify-content: center;
align-items: center;
}
.left-item-wrap {
height: 150px;
width: 80%;
margin: 10px auto 0;
background-color: aqua;
}
.right-item-wrap {
height: 100px;
width: 80%;
margin: 10px auto 0;
background-color: cadetblue;
}
.sticky1-wrap {
/* 当页面滚动到粘性定位5所在的元素距离顶部10px时，粘性定位5所在的元素会固定在顶部 */
position: sticky;
top: 10px;
}
.sticky2-wrap {
position: sticky;
/* 当页面滚动到粘性定位6所在的元素距离顶部120px时，粘性定位6所在的元素会固定在顶部 */
top: 120px;
}
</style>页面向上滚动，开始阶段，“粘性定位5”和“粘性定位6”两个div会随着屏幕向上滚动，当“粘性定位5”所在的div滑动到距离顶部10px时，“粘性定位5”所在的div就不再继续向上滚动而是固定在距离顶部10px的位置；随着屏幕继续向上滚动，当“粘性定位6”所在的div滑动到距离顶部120px时，“粘性定位6”所在的div就不再继续向上滚动也固定在距离顶部120px的位置。
?（ps：由于录制的视频还在审核中，显截图效果，视频审核通过之后再替换）
固定相对应的标题demo
<template>
<div class="container-wrap">
<div v-for="(item, index) in dataList" :key="index">
<h3 class="title-wrap">{{ item.value }}</h3>
<div v-for="(innerItem, innerndex) in item.childrenList" :key="innerndex">
<p class="content-wrap">{{ innerItem }}</p>
</div>
</div>
</div>
</template>
<script>
export default {
name: "StickyDemo",
data() {
return {
dataList: [
{
value: "A",
childrenList:['A1','A2','A3','A4','A5','A6','A7','A8','A9','A10'],
},
{
value: "B",
childrenList: ['B1','B2','B3','B4','B5','B6','B7','B8','B9','B10'],
},
{
value: "C",
childrenList: ['C1','C2','C3','C4','C5','C6','C7','C8','C9','C10'],
},
{
value: "D",
childrenList: ['D1','D2','D3','D4','D5','D6','D7','D8','D9','D10'],
},
],
};
},
};
</script>
<style scoped>
.title-wrap {
position: sticky;
top: 10px;
margin-top: 10px;
background-color: aqua;
height: 50px;
line-height: 50px;
}
.content-wrap {
height: 80px;
}
</style>
?随着页面向上滑动，当滑动到对应的标题栏内容时，标题就会固定在顶部，让用户很清楚的知道当前页面中展示的内容是属于哪个标题的内容。
