一直很好奇吸頂效果，今天自己來實(shí)現(xiàn)一波，話不多說，先上代碼為敬。

<template>
    <div class="content">
        <div class="green">green</div>
        <div class="yellow" :class="{fixed:fixed}">yellow</div>
        <div class="yellow_green"></div>
        
    </div>
</template>
<script>
export default {
    data(){
        return{
            fixed:false
        }
    },
    mounted(){
        window.addEventListener('scroll',this.handleScroll)
    },
    methods:{
        handleScroll(){
            let scrollTop=window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
            let offsetTop=document.querySelector('.yellow').offsetTop;
            if(scrollTop>offsetTop){
                this.fixed=true;
            }else{
                this.fixed=false;
            }
        }
    },
    destroyed(){
        window.removeEventListener('scroll',this.handleScroll)
    }
}
</script>

<style lang="less" scoped>
.content{
    position: relative;
    div{
        width: 750px;
        height: 500px;
        text-align: center;
        background: gray;
    }
    .green{
        background: green;
    }
    .yellow{
        background: yellow;
        height: 100px;
    }
    .yellow_green{
        background: greenyellow;
        height: 2000px;
    }
    .fixed{
        position: fixed;
        top: 0;
        left: 0;
    }
}
</style>

鼓搗一波才發(fā)現(xiàn)，原來原理非常簡(jiǎn)單，只用通過一個(gè)滾動(dòng)監(jiān)聽事件，來控制樣式就搞定了，需要注意的是離開當(dāng)前組件的時(shí)候要移除滾動(dòng)事件監(jiān)聽，不然會(huì)一直報(bào)錯(cuò)。