vue吸顶效果

// html
<template>
    <div class="scrollFixed">
        <!-- 上方数据 -->
        <div class="sTop">
            <ul>
                <li v-for="(ietm, index) in 10">这是吸顶上方的第{{index + 1}}条数据</li>
            </ul>
        </div>
        <!-- 吸顶元素 -->
        <nav class="nav" id="searchBar" :class="scrollFixed === true ? 'isFixed' :''">{{ text }}</nav>
        <!-- 下方数据 -->
        <div class="sBottom">
            <ul>
                <li v-for="(ietm, index) in 30">这是吸顶下方的第{{index + 1}}条数据</li>
            </ul>
        </div>
    </div>
</template>

// js
<script>
    export default {
        data() {
            return {
                text: '需要吸顶',
                scrollFixed: false,
                offsetTop: 0
            }
        },
        methods: {
            windowScroll () {
                // 滚动条顶部 距 滚动原点的高度
                let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
                /**
                 * 三目运算
                 * 两个高度比较
                 * 如果滑动距离 > 吸顶元素到页面顶端距离  动态添加
                 */
                scrollTop >= this.offsetTop ? (this.scrollFixed = true, this.text = '已吸顶') : (this.scrollFixed = false, this.text = '需要吸顶');
            }
        },
        mounted() {
            // 需吸顶元素 距 离浏览器顶端的高度
            this.offsetTop = document.querySelector('#searchBar').offsetTop;
            // 滚动监听
            window.addEventListener('scroll', this.windowScroll);
        },
        destroyed () {
            // 关闭 销毁监听
            window.removeEventListener('scroll', this.windowScroll);
        }
    }
</script>

<style scoped type="text/scss" lang="scss">
.isFixed{
    position:fixed;
    top:0;
    left: 0;
    z-index:999;
    background: #12d168;
    transition: all 1s;
    color: #7511ff;
}
// 基本样式略
// ......
</style>