前端中的吸顶

最新推荐文章于 2024-07-05 17:39:18 发布

该走的弯路，一步都不会少。

最新推荐文章于 2024-07-05 17:39:18 发布

阅读量737

点赞数

CC 4.0 BY-SA版权

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/weixin_44292923/article/details/104748100

vue 专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍了如何在前端开发中实现吸顶效果，通过监听滚动事件并判断滚动位置，动态改变元素定位，使元素在滚动到特定位置时固定在顶部。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前端的吸顶效果实现

原理是当scroll的值大于头部部分像素的时候执行一个position ： fixed 的固定

首先要获取scroll的像素

let scrollTops = window.pageYOffset || 
				 document.documentElement.scrollTop ||  
				 document.body.scrollTop;

判断是否大于头部的像素

this.isFixed =  scrollTops > 152? true : false

执行方法使用监听scroll的事件

window.addEventListener('scroll',this.initHeight)

最后销毁事件

destroyed(){
      window.removeEventListener('scroll',this.initHeight,false)
    }

具体代码
在需要绑定的地方动态绑定class

:class="{'is_fixed':isFixed}"

is_fixed样式

&.is_fixed{
        position: fixed;
        top: 0;
        width: 100%;
    }

js代码

export default {
    name:'nav-bar',
    data(){
        return{
            isFixed:false
        }
    },
    mounted(){
        window.addEventListener('scroll',this.initHeight)
    },
    methods:{
        initHeight(){
            let scrollTops = window.pageYOffset || document.documentElement.scrollTop ||  document.body.scrollTop;
            this.isFixed =  scrollTops > 152? true : false
        } 
    },
    //离开页面之后销毁
    destroyed(){
        window.removeEventListener('scroll',this.initHeight,false)
    } 
}