vant详情页索引显示和隐藏

<template>
    <div class="content">
        <div id="shareTop">
            <div>
                <img src="@/assets/imgs/myBg.png" style="width:100%" alt="">
            </div>
        </div>
        <van-index-bar :index-list="indexList" :sticky-offset-top="50" @select="select" :z-index="zIndex">
            <div v-for="(item,index) of indexList" :key="index">
                <van-index-anchor class="anchor" :index="item"/>
                <p style="text-align: left;">{{item}}</p>
                <van-cell v-for="i of 15" :key="i" :title="'文本'+i" />
            </div>
        </van-index-bar>
    </div>
</template>

<script>
export default {
    data() {
        return {
            indexList: ["产品介绍", "投保须知", "服务约定", "理赔流程"],
            height:200,//索引内容区域距离顶部的高度
            zIndex:"-1",
        };
    },
    mounted(){
        setTimeout(()=>{
            let height=document.querySelector(".van-index-bar").offsetTop;
            this.height=height-50;
        },10)
        window.addEventListener('scroll',this.scrollPosition);
    },
    destroyed() {     //销毁
        window.removeEventListener("scroll",this.scrollPosition);
    },
    methods:{
        scrollPosition(){
            let scrollTop=document.documentElement.scrollTop || document.body.scrollTop//滚动条滚动时，距离顶部的距离
            console.log(scrollTop,this.height)
            if(scrollTop>=this.height && this.zIndex!="1"){
                this.zIndex="1";
                return;
            }else if(scrollTop<this.height && this.zIndex!="-1"){
                this.zIndex="-1";
                return;
            }
        },
        select(e){
            console.log(e,"sssssssssssss");
            document.body.scrollTop +=1;
            document.documentElement.scrollTop +=1;
        },
        change(e){
            console.log(e,"eeeeeeeeee")
        }
    },
    watch:{
    }
}
</script>
<style scoped>
    .content /deep/ .van-index-bar__sidebar{
        top: 0;
        transform: translateY(0);
        left: 0;
        right: 0;
        flex-direction: row;
        justify-content: space-between;
        background: #fff;
    }
    .content /deep/ .van-index-bar__index{
        height: 50px;
        line-height: 50px;
        flex: auto;
        padding: 0;
    }

    .content /deep/ .van-index-bar__index--active{
        background: #f00;
        color: #fff;
    }
    .content /deep/ .van-index-anchor--sticky,.content /deep/ .van-index-anchor{
        opacity: 0; 
    } 
    .anchor{
        height: 0 !important;
    }
</style>