vue 吸顶效果

1、主要的是class名，根据判断选择样式

<div id="div">
    <div :class="isFixed?'isfixed':'nav'">
        需要吸顶的div
    </div>
</div>

2、在mounted中添加滚动事件

data(){
    return {
        isfixed:false
    }
},
mountes(){
    window.addEventListener("scroll",this.getScroll,true)
}

3、监听滚动

methods:{
    getScroll(){
        const top=document.getElementById("app").scrollTop;//滚动条距离顶部的距离
        const heightOffset=document.getElementById("div").offsetHeight;//div的高度
        if(top>110 && TOP<heightOffset){
            this.isFixed=true
        }else{
            this.isFixed=false
        }
    }
}

4、css样式

.nav{
    border:solid 1px #ccc;
}
.isFixed{
    position:fixed;
    top:80px;
    left:150px;
    z-index:9999;
}