❧ Vue3吸顶悬浮实现

<template>
    <div class="header-sticky" :class="{ show: top >= offset }">
        <slot></slot>
    </div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue';

// 超过指定滚动距离显示阴影效果
const offset = 150;

// 滚动距离
const top = ref(0);
onMounted(() => {
    // 滚动的元素
    const ele = document.getElementsByClassName('el-main')[0];
    ele.addEventListener('scroll', () => {
        top.value = ele.scrollTop;
    }, true)
})
</script>

<style lang="scss">
.header-sticky {
    width: 100%;
    height: auto;
    position: sticky;
    left: 0;
    top: 0;
    z-index: 999;
    background-color: #fff;
    &.show {
        border-bottom: 1px solid #eee;
        box-shadow: 0 1px 4px #00152921;
    }
}
</style>