50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | StickyNavbar（粘性导航栏）
📅 我们继续 50 个小项目挑战！—— StickyNavbar组件
仓库地址：https://github.com/SunACong/50-vue-projects
项目预览地址：https://50-vue-projects.vercel.app/
使用 Vue 3 的 Composition API（<script setup>）结合 TailwindCSS 创建一个响应式导航栏组件。该导航栏会随着页面滚动自动变为白色背景并带有阴影，同时支持当前页签的高亮显示。
🎯 组件目标
- 创建一个固定定位、响应式导航栏
- 页面滚动时切换导航栏样式（暗色 → 浅色）
- 支持当前页签高亮状态
- 导航栏下方包含
Hero区域和内容区域 - 使用
TailwindCSS快速构建 UI 样式 - 添加平滑过渡动画以增强交互体验
⚙️ 技术实现点
| 技术点 | 描述 |
|---|---|
Vue 3 <script setup> | 使用响应式变量控制导航栏状态 |
ref 响应式变量 | 控制是否为粘性导航栏 (isSticky) 和当前激活页签 (activePage) |
onMounted / onBeforeUnmount | 添加和移除滚动监听事件 |
window.addEventListener('scroll') | 检测页面滚动位置 |
动态类绑定 :class | 切换导航栏样式与链接颜色 |
| TailwindCSS 过渡类 | 平滑切换导航栏样式变化 |
| TailwindCSS 背景类 | 设置 Hero 区域背景图与遮罩层 |
🧱 组件实现
模板结构 <template>
<template><div><!-- 导航栏 --><nav:class="['fixed top-0 right-0 left-0 z-50 transition-all duration-300',isSticky ? 'bg-white shadow-md' : 'bg-zinc-900',]"><div:class="['container mx-auto flex items-center justify-between transition-all duration-300',isSticky ? 'py-2' : 'py-5',]"><h1 class="text-xl font-bold"><a href="#" :class="isSticky ? 'text-black' : 'text-white'">My Website</a></h1><ul class="flex gap-4"><li><a href="#" class="nav-link" :class="linkClass('Home')">Home</a></li><li><a href="#" class="nav-link" :class="linkClass('About')">About</a></li><li><a href="#" class="nav-link" :class="linkClass('Services')">Services</a></li><li><a href="#" class="nav-link" :class="linkClass('Contact')">Contact</a></li></ul></div></nav><!-- Hero 区域 --><sectionclass="relative z-10 flex h-screen items-center justify-center bg-cover bg-center text-center text-white"><div class="bg-opacity-50 absolute inset-0 z-0 bg-black"></div><div class="relative z-10 px-4"><h1 class="-mt-5 mb-4 text-4xl font-bold md:text-5xl">Welcome To My Website</h1><p class="text-lg tracking-wide">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores, consequuntur?</p></div></section><!-- 内容区域 --><section class="container mx-auto space-y-6 px-4 py-10"><h2 class="mt-4 text-2xl font-semibold">Content One</h2><p class="leading-7 tracking-wide text-gray-600">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ratione dolorem voluptateseveniet tempora ut cupiditate magnam, sapiente, hic quo in ipsum iste soluta eaqueperferendis nihil recusandae dolore officia aperiam corporis similique. Facilis quostempore labore totam! Consectetur molestiae iusto ducimus error reiciendisaspernatur dolor, modi dolorem sit architecto, voluptate magni sunt unde est quas?Voluptates a dolorum voluptatum quo perferendis aut sit. Aspernatur liberolaboriosam ab eligendi omnis delectus earum labore, placeat officiis sint illum remvoluptas ipsum repellendus iste eius recusandae quae excepturi facere, iure rerumsequi? Illum velit delectus dicta et iste dolorum obcaecati minus odio eligendi!</p><h3 class="text-xl font-semibold">Content Two</h3><p class="leading-7 tracking-wide text-gray-600">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Pariatur provident nostrumpossimus inventore nisi laboriosam consequatur modi nulla eos, commodi, omnisdistinctio! Maxime distinctio impedit provident, voluptates illo odio nostrum minimabeatae similique a sint sapiente voluptatum atque optio illum est! Tenetur temporadoloremque quae iste aperiam hic cumque repellat?</p></section></div>
</template>
脚本逻辑 <script setup>
<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'const isSticky = ref(false)
const activePage = ref('Home') // 也可以绑定路由实现高亮const handleScroll = () => {isSticky.value = window.scrollY > 100
}const linkClass = (page) => {return ['transition-colors duration-300 px-3 py-1',isSticky.value ? 'text-black hover:text-red-600' : 'text-white hover:text-red-400',activePage.value === page ? 'text-red-600 font-bold' : '',]
}onMounted(() => {window.addEventListener('scroll', handleScroll)
})onBeforeUnmount(() => {window.removeEventListener('scroll', handleScroll)
})
</script>
🔍 重点效果实现
✅ 粘性导航栏（Sticky Nav）
通过监听页面滚动事件来判断是否启用粘性导航栏样式：
const handleScroll = () => {isSticky.value = window.scrollY > 100
}
当用户向下滚动超过 100px 后，导航栏会变成白色背景并添加阴影，提高可读性和层级感。
💡 当前页签高亮
定义了一个方法 linkClass(page) 来动态设置链接的类名：
const linkClass = (page) => {return ['transition-colors duration-300 px-3 py-1',isSticky.value ? 'text-black hover:text-red-600' : 'text-white hover:text-red-400',activePage.value === page ? 'text-red-600 font-bold' : '',]
}
这个方法可以根据当前激活页签返回对应的 CSS 类，用于实现高亮效果。
🎨 Hero 区域背景图与遮罩层
使用了以下结构来创建具有黑色遮罩层的背景图：
<div class="bg-opacity-50 absolute inset-0 z-0 bg-black"></div>
这样可以确保文字内容清晰可见，不会被背景图干扰。
🎨 TailwindCSS 样式重点讲解
| 类名 | 作用 |
|---|---|
fixed top-0 right-0 left-0 z-50 | 固定定位导航栏 |
transition-all duration-300 | 平滑过渡动画 |
bg-white, shadow-md | 白色背景 + 阴影 |
bg-zinc-900 | 深色背景 |
text-xl font-bold | 网站 Logo 文字样式 |
flex gap-4 | 导航链接水平排列 |
hover:text-red-600 | 链接悬停变色 |
bg-cover, bg-center | 背景图自适应居中 |
absolute inset-0, z-0 | 遮罩层覆盖全屏 |
bg-opacity-50 | 半透明黑色遮罩 |
这些 TailwindCSS 类帮助我们快速构建了一个美观、响应式的导航栏与页面布局。
📁 常量定义 + 组件路由
constants/index.js 添加组件预览常量：
{id: 25,title: 'Sticky Navbar',image: 'https://50projects50days.com/img/projects-img/25-sticky-navbar.png',link: 'StickyNavbar',},
router/index.js 中添加路由选项：
{path: '/StickyNavbar',name: 'StickyNavbar',component: () => import('@/projects/StickyNavbar.vue'),},
🏁 总结
适合用于企业官网、个人博客、作品集网站等需要展示信息的页面。
你可以进一步扩展此组件的功能包括：
- ✅ 支持移动端菜单折叠（汉堡菜单）
- ✅ 支持深色/浅色主题切换
- ✅ 支持点击后平滑滚动到对应区域
- ✅ 将导航栏封装为独立组件（如
<AppNavbar />） - ✅ 支持响应式断点（如仅在桌面显示某些元素）
👉 下一篇，我们将完成DoubleVerticalSlider组件，非常具有交互性的适合广告展示。🚀
感谢阅读，欢迎点赞、收藏和分享 😊