在vue中如何实现吸顶

一、简单吸顶

思路：需要写两个样式，一个吸顶样式，一个正常样式，通过监听scroll事件，实现吸顶功能

//fix_info_title为吸顶样式通过固定定位实现，info_title为正常样式
<div :class="isceiling?'fix_info_title':'info_title'">
      <span @click="goproinfo(0)" :class="iscolor1?'proinfo_span':''">商品详情</span>
      <span @click="goproinfo(1)" :class="iscolor2?'params_span':''">规格参数</span>
      <span @click="goproinfo(2)" :class="iscolor3?'evaluate_span':''">用户评价</span>
      <button class="fix_shoppingCart" v-show="isceiling">加入购物车</button>
</div>

mounted(){
        window.addEventListener("scroll",this.celling)  //监听scroll事件
        this.$nextTick(function () {
            window.addEventListener('scroll', this.onScroll)
        })
    }

//吸顶
celling(){
   //获取需要出现吸顶的位置
   let titletop=document.getElementsByClassName('info_title_div')[0].offsetTop
   //获取鼠标位置
   let bodytop=document.body.scrollTop || document.documentElement.scrollTop;
   this.isceiling=bodytop>titletop   //true/false
},

二、根据位置标题的样式发生变化

比如，鼠标滑动到商品详情页面具体内容时，商品详情四字变为红色，其他为灰色

//滚动
        onScroll(){
            let bodytop=document.body.scrollTop || document.documentElement.scrollTop;
            let getinfo=document.querySelector('.info_title1').offsetTop     //获取商品详情div的高度
            let getparams=document.querySelector('.info_title2').offsetTop     //获取规格参数div的高度
            let getevaluate=document.querySelector('.info_title3').offsetTop     //获取用户评论div的高度
            if(bodytop<=getparams-70){
                this.iscolor1=true
                this.iscolor2=false
                this.iscolor3=false
            }else if(bodytop>=getparams-70 && bodytop<=getevaluate-70){
                this.iscolor1=false
                this.iscolor2=true
                this.iscolor3=false
            }else if(bodytop>=getevaluate-70){
                this.iscolor1=false
                this.iscolor2=false
                this.iscolor3=true
            }
        }

三、点击吸顶的标题，跳转到对应位置

//点击标题跳转
        goproinfo(index){
            let getinfo=document.querySelector('.info_title1').offsetTop     //获取商品详情div的高度
            let getparams=document.querySelector('.info_title2').offsetTop     //获取规格参数div的高度
            let getevaluate=document.querySelector('.info_title3').offsetTop     //获取用户评论div的高度
            let bodytop=document.body.scrollTop || document.documentElement.scrollTop;
            if(index==0){
                let distance1=getinfo-110
                // document.documentElement.scrollTop=getinfo-110
                $('html,body').animate({scrollTop: distance1}, 1000);
            }else if(index==1){
                let distance2=getparams-60
                // document.documentElement.scrollTop=getparams-60
                $('html,body').animate({scrollTop: distance2}, 1000);
            }else if(index==2){
                let distance3=getevaluate-60
                $('html,body').animate({scrollTop: distance3}, 1000);
            } 
        },

注：可以使用jq提供的方法，使得页面有动画效果

$('html,body').animate({scrollTop: 需要到达的位置}, 时间(ms));

四、在vue中使用jq

安装  npm install jquery

在需要使用jq的.vue文件中导入

 import $ from 'jquery'