当前位置: 首页 > news >正文

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组件,非常具有交互性的适合广告展示。🚀

感谢阅读,欢迎点赞、收藏和分享 😊

http://www.dtcms.com/a/269863.html

相关文章:

  • Qwen视觉模型本地化部署,实现识别图片:Qwen2___5-VL-7B-Instruct
  • 分布式光纤传感:为储能安全保驾护航
  • 2025年7月:打cs1.5 600元装机台式电脑方案A
  • 学习软件测试的第十二天(接口测试)
  • Spring Security架构与实战全解析
  • 人工智能-基础篇-24-RAG和LLM到底怎么理解和区分?(LLM是深度训练的大语言生成模型,RAG是LLM更智能的补充技术)
  • 日语学习-日语知识点小记-构建基础-JLPT-N3阶段(1):新的开始-尊他开始
  • 【无标题】导出pdf
  • 数据库版本自动管理
  • MVP架构接口开发套路
  • TCP/IP协议基础
  • mybatis/mybatis-plus添加数据,自增id的值为负数
  • 第十四天,7月8日,八股
  • 《UE5_C++多人TPS完整教程》学习笔记42 ——《P43 瞄准(Aiming)》
  • 【音视频】HLS-m3u8协议介绍
  • Redis基础学习(五大值数据类型的常用操作命令)
  • 超低功耗CC2340R SimpleLink™ 系列 2.4GHz 无线 MCU支持BLE5.3/Zigbee/Thread/专有协议
  • 微软上线 Deep Research 预览版:o3+必应赋能研究自动化
  • css 面试题
  • 从零构建MCP服务器:FastMCP实战指南
  • 跨平台软件构建方法及工具介绍
  • 深度学习-多分类
  • Java 实现 Excel 文件对比与数据填充
  • 多线程(1)
  • Minmax 算法与 Alpha-Beta 剪枝小教学
  • (普及−)B3629 吃冰棍——二分/模拟
  • 【Spring WebSocket详解】Spring WebSocket从入门到实战
  • Spring Boot 事务失效问题:同一个 Service 类中方法调用导致事务失效的原因及解决方案
  • MATLAB/Simulink电机控制仿真代做 同步异步永磁直驱磁阻双馈无刷
  • CD46.【C++ Dev】list的模拟实现(1)