在Vue3中封装一个导航栏组件，并且实现，随着滚动条滚动实现一个吸顶效果，供大家参考
导航栏组件的效果图：
滚动条滚动以后的吸顶效果示意图：
具体代码展示：
<template>
<header class="app-header">
<div class="container">
<!-- 头部导航区域 -->
<HeaderNavCommon />
<div class="search">
<i class="iconfont icon-search"></i>
<input type="text" placeholder="搜一搜" />
</div>
<div class="cart">
<a href="#" class="curr">
<i class="iconfont icon-cart"></i>
<em>2</em>
</a>
</div>
</div>
</header>
</template>
<script>
import HeaderNavCommon from '@/components/header-nav-common.vue'
export default {
name: 'AppHeader',
components: {
HeaderNavCommon
}
}
</script>
<style scoped lang="less">
.app-header {
background: #fff;
.container {
display: flex;
align-items: center;
}
.navs {
width: 820px;
display: flex;
justify-content: space-around;
padding-left: 40px;
li {
margin-right: 40px;
width: 38px;
text-align: center;
a {
display: inline-block;
font-size: 16px;
line-height: 32px;
height: 32px;
}
&:hover {
a {
color: @xtxColor;
border-bottom: 1px solid @xtxColor;
}
}
}
}
.search {
width: 170px;
height: 32px;
position: relative;
border-bottom: 1px solid #e7e7e7;
line-height: 32px;
.icon-search {
font-size: 18px;
margin-left: 5px;
}
input {
width: 140px;
padding-left: 5px;
color: #666;
}
}
.cart {
width: 50px;
.curr {
height: 32px;
line-height: 32px;
text-align: center;
position: relative;
display: block;
.icon-cart {
font-size: 22px;
}
em {
font-style: normal;
position: absolute;
right: 0;
top: 0;
padding: 1px 6px;
line-height: 1;
background: @helpColor;
color: #fff;
font-size: 12px;
border-radius: 10px;
font-family: Arial;
}
}
}
}
</style>
中间菜单部门单独封装一个组件，实现两个组件的复用 （HeaderNavCommon组件）
<template>
<ul class="app-header-nav">
<li class="home"><RouterLink to="/">首页</RouterLink></li>
<li><a href="#" >美食</a></li>
<li><a href="#" >餐厨</a></li>
<li><a href="#" >艺术</a></li>
<li><a href="#" >电器</a></li>
<li><a href="#" >居家</a></li>
<li><a href="#" >洗护</a></li>
<li><a href="#" >孕婴</a></li>
<li><a href="#" >服装</a></li>
<li><a href="#" >杂货</a></li>
</ul>
</template>
<script>
export default {
name: 'AppHeaderNav'
}
</script>
<style scoped lang='less'>
.app-header-nav {
width: 820px;
display: flex;
padding-left: 40px;
position: relative;
z-index: 998;
li {
margin-right: 40px;
width: 38px;
text-align: center;
a {
font-size: 16px;
line-height: 32px;
height: 32px;
display: inline-block;
}
&:hover {
a {
color: @xtxColor;
border-bottom: 1px solid @xtxColor;
}
}
}
}
</style>
封装吸顶效果的组件
<template>
<div class="app-header-sticky" :class="{ show: top >= 78 }">
<div class="container" v-if="top >= 78">
<!-- 中间 -->
<HeaderNavCommon />
<!-- 右侧按钮 -->
<div class="right">
<RouterLink to="/">品牌</RouterLink>
<RouterLink to="/">专题</RouterLink>
</div>
</div>
</div>
</template>
<script>
import HeaderNavCommon from '@/components/header-nav-common.vue'
// import { ref } from 'vue'
import { useWindowScroll } from '@vueuse/core'
export default {
name: 'AppHeaderSticky',
components: { HeaderNavCommon },
setup() {
// 页面滚动距离
// const top = ref(0)
// window.onscroll = () => {
// top.value = document.documentElement.scrollTop
// }
// 页面滚动利用第三方包
const { y: top } = useWindowScroll()
return { top }
}
}
</script>
<style scoped lang="less">
.app-header-sticky {
width: 100%;
height: 80px;
position: fixed;
left: 0;
top: 0;
z-index: 999;
background-color: #fff;
border-bottom: 1px solid #e4e4e4;
// 此处为关键样式!!!
// 默认情况下完全把自己移动到上面
transform: translateY(-100%);
// 完全透明
opacity: 0;
// 显示出来的类名
&.show {
transition: all 0.3s linear;
transform: none;
opacity: 1;
}
.container {
display: flex;
align-items: center;
}
.right {
width: 220px;
display: flex;
text-align: center;
padding-left: 40px;
border-left: 2px solid @xtxColor;
a {
width: 38px;
margin-right: 40px;
font-size: 16px;
line-height: 1;
&:hover {
color: @xtxColor;
}
}
}
}
</style>
