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>