浅谈：给导航栏添加悬浮背景变化/固定顶部效果
如果你想让导航栏看起来更专业炫酷，可以进一步增强体验，比如：
鼠标悬停时，背景和文字颜色都变化
导航栏随页面滚动时固定在顶部（吸顶导航）
下面是示例代码：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>酷炫导航栏（Sticky版）</title> <style> body { margin: 0; font-family: Arial, sans-serif; line-height: 1.6; } .navbar { position: sticky; top: 0; z-index: 1000; display: flex; justify-content: space-between; align-items: center; background: rgba(51, 51, 51, 0.95); /* 半透明背景 */ padding: 10px 30px; transition: background-color 0.5s; } .navbar .logo { color: #fff; font-size: 24px; text-decoration: none; font-weight: bold; } .navbar .nav-links a { color: #f2f2f2; text-decoration: none; margin-left: 30px; padding: 10px 15px; border-radius: 5px; transition: background-color 0.3s, color 0.3s; } .navbar .nav-links a:hover { background-color: #ff6600; color: white; } .content { padding: 20px 40px; } </style> </head> <body> <div class="navbar"> <div class="logo">MyLogo</div> <div class="nav-links"> <a href="#home">首页</a> <a href="#about">关于</a> <a href="#services">服务</a> <a href="#contact">联系</a> </div> </div> <div class="content"> <h1>欢迎来到我的网站！</h1> <p>（以下是模拟大段正文内容，为了让滚动效果更明显）</p> <p>这里是内容……</p> <p>继续滚动可以看到导航栏吸附在顶部！</p> <p>更多内容……</p> <p>再更多内容……</p> <p>无限内容……</p> <p>无限滚动内容……</p> <p>页面很长……</p> <p>再继续滚动……</p> <p>你会发现……</p> <p>导航栏会一直在顶部……</p> <p>直到你滚动到页面底部……</p> <p>导航栏会一直在顶部……</p> <p>这是一个酷炫的导航栏！</p> <p>谢谢</p> </div> </body> </html>我们做了三个改进。其一，运用 position: sticky; top: 0; 属性，可将顶部元素固定，确保用户在滚动页面时仍能随时查看重要信息；其二，将背景设置为 rgba()半透明模式，使页面视觉效果更轻盈，避免繁杂背景干扰用户注意力，提升整体美观度；其三，借助 hover 选择器配合 transition 过渡，让背景与字体颜色变化平滑流畅，增强用户交互体验，使页面在用户操作时更加生动直观。
现在我们打开浏览器看看效果：
同样我们右键-->检查看看具体的布局同上面 flex 的区别：
是不是比前面更专业也更流畅了，效果也更好看了。