滑动头部固定，要不也了解下？

<!--滑动的容器-->
<div class="scroll-div">
    <!--一个头部加一个item的容器-->
    <div class="for-class" v-for="item in baseArray">
        <!--需要fixed住的头部,id为获取具体位置使用,可替换成ref
        绑定class实现添加fixed样式作用-->
        <div class="info-line"
             :id="item.idName"
             :class="{fiexd_line:fiexdItem===item.fiexdItem}">
             {{item.name}}
        </div>
     <!--下方的item，这里与本文关系不到,可忽略-->
     <div class="detail-container" 
          :class="{margin_top:fiexdItem===1000}">
          <div class="detail-item"
               v-for="sub_item in item.list"
               @click="setLocation(sub_item)">
               {{sub_item}}
          </div>
    </div>
</div>

.scroll-div {
      width: 100%;
      overflow: auto;
      ...
    }
    .info-line {
     ...
     //这个都不是特别重要
    }
    .fiexd_line {
      position: fixed;
      width: 100%;
      ...
    }

具体的数据可根据实际情况修改，这里的数据以效果图为准
//添加A-Z数组
let baseAtoZArray = [];//生成A-Z的字母
for (let i = 65; i < 91; i++) {
    baseAtoZArray.push(String.fromCharCode(i));
}
//均分数组并添加相应的数据，每个子数组最多有7个元素
this.baseArray = [...chunk(baseAtoZArray, 7)];
for (let item of this.baseArray) {
    this.baseArray[this.baseArray.indexOf(item)] = {
        name: item.join(''),//显示的文本
        idName: `${item[0]}2${item[item.length - 1]}-line`,//唯一id,es6模版字符串和下方的...运算符了解下
        fiexdItem: this.baseArray.indexOf(item),//fixed标识
        list: this.getRegList(item[0], item[item.length - 1]),//符合该条件的下方内容，与本文关系不大
    };
}
//添加期望工作城市与热门城市
this.baseArray = [
{
    name: '期望工作城市',
    idName: `base-line`,
    fiexdItem: 1000,
    list: [this.location],
},
{
    name: '热门城市',
    idName: `hot-line`,
    fiexdItem: 100,
    list: this.$config.HOT_CITIES,
},...this.baseArray];

//监听滚动事件
//界面加载完成后，将每一层header距离头部的距离记录下来
for (let item of that.baseArray) {
    item.top = $('#' + item.idName).offset().top
}
$('.scroll-div').on('scroll', function () {
    //对每一项数据监测
    for (let item of that.baseArray) {
        if (this.scrollTop  > item.top - 20) {
            //因为在同一高度中，只可能有一个header，所以设置一个，其他header不匹配，然后duang的一下符合条件的就fixed住了
            that.fiexdItem = item.fiexdItem;
        }
    }
});