滚动时Header颜色变化效果
我将为您创建一个滚动时Header颜色变化的页面效果。当页面滚动时，Header的背景颜色会从透明变为半透明深色，文字颜色也会相应变化。
设计思路
- 使用固定定位的Header
- 监听滚动事件，根据滚动位置添加/移除类名
- 使用CSS过渡效果实现平滑的颜色变化
- 添加足够的内容以确保页面可以滚动
实现代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>滚动时Header颜色变化效果</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.6;
color: #333;
}
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
padding: 20px 5%;
display: flex;
justify-content: space-between;
align-items: center;
transition: all 0.4s ease;
z-index: 1000;
}
header.transparent {
background-color: rgba(0, 0, 0, 0);
color: white;
}
header.scrolled {
background-color: rgba(15, 23, 42, 0.9);
color: white;
padding: 12px 5%;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.logo {
font-size: 1.8rem;
font-weight: 700;
letter-spacing: 1px;
}
nav ul {
display: flex;
list-style: none;
}
nav ul li {
margin-left: 30px;
}
nav ul li a {
text-decoration: none;
color: inherit;
font-weight: 500;
transition: color 0.3s;
}
nav ul li a:hover {
color: #4ade80;
}
.hero {
height: 100vh;
background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.7)),
url('https://images.unsplash.com/photo-1518837695005-2083093ee35b?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80') no-repeat center center/cover;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
color: white;
padding: 0 20px;
}
.hero h1 {
font-size: 3.5rem;
margin-bottom: 20px;
}
.hero p {
font-size: 1.2rem;
max-width: 700px;
margin-bottom: 30px;
}
.btn {
display: inline-block;
padding: 12px 30px;
background-color: #4ade80;
color: white;
text-decoration: none;
border-radius: 30px;
font-weight: 600;
transition: all 0.3s;
}
.btn:hover {
background-color: #22c55e;
transform: translateY(-3px);
}
.content {
padding: 80px 5%;
max-width: 1200px;
margin: 0 auto;
}
.content h2 {
font-size: 2.5rem;
margin-bottom: 30px;
text-align: center;
color: #1e293b;
}
.content p {
margin-bottom: 20px;
font-size: 1.1rem;
}
.content-section {
margin-bottom: 60px;
}
footer {
background-color: #0f172a;
color: white;
text-align: center;
padding: 30px;
margin-top: 60px;
}
@media (max-width: 768px) {
.hero h1 {
font-size: 2.5rem;
}
nav ul li {
margin-left: 15px;
}
}
</style>
</head>
<body>
<header class="transparent">
<div class="logo">滚动效果</div>
<nav>
<ul>
<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>
</nav>
</header>
<section class="hero">
<h1>滚动时Header颜色变化效果</h1>
<p>向下滚动页面，观察顶部导航栏的颜色变化效果</p>
<a href="#content" class="btn">了解更多</a>
</section>
<section id="content" class="content">
<div class="content-section">
<h2>页面内容区域</h2>
<p>这是一个演示页面，展示当用户滚动页面时，顶部导航栏的颜色变化效果。继续向下滚动，可以看到更多内容。</p>
</div>
<div class="content-section">
<h2>设计原理</h2>
<p>这个效果通过JavaScript监听滚动事件实现。当页面滚动超过一定阈值时，为Header添加一个类名，从而改变其样式。</p>
<p>CSS过渡效果确保了颜色变化的平滑性，提供了更好的用户体验。</p>
</div>
<div class="content-section">
<h2>响应式设计</h2>
<p>这个设计完全响应式，可以在各种设备上良好工作，包括手机和平板电脑。</p>
<p>在小屏幕设备上，导航菜单会自动调整以适应较小的屏幕空间。</p>
</div>
<div class="content-section">
<h2>现代网页设计趋势</h2>
<p>滚动时改变Header颜色是现代网页设计的流行趋势之一。它不仅提供了视觉上的吸引力，还有助于在用户滚动时保持导航的可见性和可用性。</p>
<p>这种效果常见于各种类型的网站，从企业网站到作品集网站都有应用。</p>
</div>
<div class="content-section">
<h2>实现方法</h2>
<p>要实现这种效果，你需要：</p>
<p>1. 一个固定定位的Header</p>
<p>2. 两种不同状态的CSS样式（透明和滚动后）</p>
<p>3. 一段JavaScript代码来监听滚动事件并在适当的时候切换样式</p>
<p>4. CSS过渡效果以实现平滑的颜色变化</p>
</div>
</section>
<footer>
<p>© 2023 滚动Header效果演示 | 设计精美网页</p>
</footer>
<script>
window.addEventListener('scroll', function() {
const header = document.querySelector('header');
if (window.scrollY > 50) {
header.classList.remove('transparent');
header.classList.add('scrolled');
} else {
header.classList.remove('scrolled');
header.classList.add('transparent');
}
});
</script>
</body>
</html>
功能说明
- 初始状态：Header背景透明，文字白色（与背景形成对比）
- 滚动后：当页面滚动超过50px时，Header背景变为半透明深色，保持固定在顶部
- 平滑过渡：使用CSS过渡属性实现颜色变化的平滑动画效果
- 响应式设计：页面适应不同屏幕尺寸
您可以直接复制上面的代码到HTML文件中，然后在浏览器中打开查看效果。当您向下滚动页面时，顶部导航栏的颜色会平滑地发生变化。
image.png
image.png
