Vue监听滚动实现导航栏锚点定位

父级

<div>
       <div id="floor0"></div>
        <div id="floor1"></div>
        <div id="floor2"></div>
        <div id="floor3"></div>
   

子组件

   <ul id="tab"  slot="center" class="compreDiagnosisInfoUl" :class="navBarFixed == true ? 'navBarWrap':''">
                <li  id="tab1" class="active" @click="itemClick('floor0',0)">
                    <h2 class="top">导航一</h2>
                </li>
                <li id="tab2" @click="itemClick('floor1',1)"  v-if="header.fundtype != '货币型'">
                    <h2 class="top">导航二</h2>                 
                </li>
                <li id="tab3" @click="itemClick('floor2',2)">
                    <h2 class="top">导航三</h2>
                     </li>
                <li id="tab4" @click="itemClick('floor3',3)">
                    <h2 class="top">导航四</h2>
                     </li>
            </ul>

定义顶部吸附变量
data() {
navBarFixed:false
}

   methods: {
      itemClick(index,i){
                this.moveIndex = i;
                let anchorElement = document.getElementById(index);
                // console.log(anchorElement)
                let scrollTop = document.body.scrollTop ? document.body.scrollTop : document.documentElement.scrollTop;
                if(anchorElement && i != 1) {
                    anchorElement.scrollIntoView();
                }
                // console.log(scrollTop)
                // 点击的时候 滚动到对应的那个内容区
                // 1：获取点击的按钮对应页面的id
                let PageId = document.querySelector("#floor" + i);
                //:2：设置滚动 并且带有丝滑的滚动事件
                window.scrollTo({
                    top: PageId.offsetTop - 80,
                    behavior: "smooth"
                });

                this.tabSelect(i);
            },
            tabSelect(i){
                let docList = document.querySelectorAll('li');
                let doc = document.querySelector('#tab' + i);
                for(let i = 0; i < docList.length; i++){
                    docList[i].classList.remove('active');
                }
                doc.classList.add('active');
            },
            handleScroll(){
                 let scrollTop = window.pageYOffset + 80|| document.documentElement.scrollTop + 80|| document.body.scrollTop + 80
                let floor_0 = document.querySelector('#floor0').offsetTop;
                let floor_1 = document.querySelector('#floor1').offsetTop;
                let floor_2 = document.querySelector('#floor2').offsetTop;
                let floor_3 = document.querySelector('#floor3').offsetTop;

                //当滚动超过500时，实现吸顶效果
                if(scrollTop  > 500){
                    this.navBarFixed = true;
                }else {
                    this.navBarFixed = false
                }

                if (floor_0 <= scrollTop && scrollTop < floor_1) {
                    this.tabSelect(1);

                } else if (floor_1 <= scrollTop && scrollTop < floor_2) {
                    this.tabSelect(2);

                } else if (floor_2 <= scrollTop && scrollTop < floor_3) {
                    this.tabSelect(3);

                } else if (scrollTop >= floor_3) {
                    this.tabSelect(4);

                }

          
            },
   }

 mounted() {
   //事件监听滚动
            window.addEventListener('scroll',this.handleScroll)
}

 destroyed() {
            // 移除事件监听
            window.removeEventListener("scroll", this.handleScroll);
        },