vue列表项吸顶 js+css两种 骚操作

demo需求：vue项目中，在列表里，滑动到哪个日期的时候，哪个日期就吸顶显示：

js方法：

用js的方法思路：获取每一项item的底部距离顶部的高度，把所有的高度放在一个数组里面，在去循环比对，在使用scroll事件，看我们滑动的距离在数组的哪个区间里，在哪个区间就展示展示那个日期，上代码：

<template>
  <div class="box">
    <div class="titleTimeStyle">日期 {
   {
    titleTime }}</div>
    <div class="list" @scroll="scrollTop">
      <div class="item" v-for="(item, i) in listData" :key="i">
        <div class="data">
          {
   {
    item.time }}
        </div>
        <div
          class="country"
          v-for="(items, index) in item.country"
          :key="index"
        >
          {
   {
    items.name }}
        </div>
        <div :class="'items' + i"></div>
      </div>
    </div>
  </div>
</template>
   <script>
export default {
   
  data() {
   
    return {
   
      titleTime: "",
      listData: [
        {
    time: "1.01", country: [{
    name: "德国" }, {
    name: "英国" }] },
        {
   
          time: "1.02",
          country: [{
    name: "日本" }, {
    name: "美国" }, {
    name: "印度" }],
        },
        {
   
          time: "1.03",
          country: [
            {
    name: "冰岛" },
            {
    name: "丹麦" },
            {
    name: "挪威" },
            {
    name: "芬兰" },
            {
    name: "爱尔兰" },
          ],
        },
        {
   
          time: "1.04",
          country: [{
    name: "瑞典" }, {
    name: "波兰" }],
        },
        {
   
          time: "1.05",
          country: [{
    name: "捷克" }, {<