导航栏置顶问题

1.问题描述

页面滚动导航栏消失

1.滚动前

2.滚动后

2.解决方案

在配置导航栏的页面给导航栏加入CSS属性

position: sticky;
z-index: 1000;
background-color: #fff;

源代码

<template>
    <div class="common-layout">
        <el-container>
            <el-header class="header">
                <Header></Header>
            </el-header>
            <el-container>
                <el-main>
                    <Content></Content>
                </el-main>
                <el-footer class="footer">
                    <Footer></Footer>
                </el-footer>
            </el-container>
        </el-container>
    </div>
</template>
<script>
import Footer from '@/components/layout/Footer.vue'
import Header from '@/components/layout/Header.vue'
import Content from '@/components/layout/Content.vue'
export default {
    name: 'Index',
    components: {
        Footer,
        Header,
        Content
    },
    data() {
        return {
        }
    }
}
</script>
<style scoped lang="scss">
.common-layout {
    height: 100%;

    .header,
    .footer {
        position: sticky;
        z-index: 1000;
        background-color: #fff;
    }

    .header {
        top: 0;
        min-height: 60px;
    }

    .footer {
        bottom: 0;
        border-top: 1px solid rgb(220, 223, 230);
        max-height: 20px;
    }


}
</style>

3.解决效果