vue 吸顶效果

最新推荐文章于 2024-03-26 11:08:17 发布

原创最新推荐文章于 2024-03-26 11:08:17 发布 · 732 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

本文介绍如何在Vue项目中实现一个div元素在页面滚动到一定位置时变为固定定位，从而达到吸顶效果。主要涉及Vue的数据绑定、事件监听以及CSS样式调整。通过监听滚动事件，动态设置class，当滚动超过特定距离时，将div设置为fixed定位，实现导航栏的吸顶功能。

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;
}