| 在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>以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持wanshiok.com。
Vue.js之$emit用法案例详解
用Vue封装导航栏组件 |
