粘性定位 position: sticky

 经常使用的定位方式是 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>

 随着页面向上滑动，当滑动到对应的标题栏内容时，标题就会固定在顶部，让用户很清楚的知道当前页面中展示的内容是属于哪个标题的内容。