我来为你创建一个具有左侧导航滑动定位效果的网页，这个页面将包含平滑滚动、高亮当前区域、以及响应式设计。
（图片来源网络，侵删）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">左侧导航滑动定位网页</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
line-height: 1.6;
color: #333;
overflow-x: hidden;
}
/* 左侧导航栏 */
.sidebar {
position: fixed;
left: 0;
top: 0;
width: 250px;
height: 100vh;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
padding: 2rem 0;
z-index: 1000;
transition: transform 0.3s ease;
box-shadow: 2px 0 10px rgba(0,0,0,0.1);
}
.sidebar-header {
padding: 0 1.5rem 2rem;
border-bottom: 1px solid rgba(255,255,255,0.1);
}
.sidebar-header h2 {
color: white;
font-size: 1.5rem;
font-weight: 600;
}
.nav-menu {
list-style: none;
padding: 1rem 0;
}
.nav-item {
margin-bottom: 0.5rem;
}
.nav-link {
display: flex;
align-items: center;
padding: 1rem 1.5rem;
color: rgba(255,255,255,0.8);
text-decoration: none;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.nav-link::before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 4px;
height: 100%;
background: white;
transform: translateX(-100%);
transition: transform 0.3s ease;
}
.nav-link:hover {
background: rgba(255,255,255,0.1);
color: white;
padding-left: 2rem;
}
.nav-link:hover::before,
.nav-link.active::before {
transform: translateX(0);
}
.nav-link.active {
background: rgba(255,255,255,0.15);
color: white;
font-weight: 500;
}
.nav-icon {
margin-right: 0.75rem;
font-size: 1.2rem;
}
/* 移动端菜单按钮 */
.menu-toggle {
display: none;
position: fixed;
top: 1rem;
left: 1rem;
z-index: 1001;
background: #667eea;
color: white;
border: none;
padding: 0.75rem;
border-radius: 8px;
cursor: pointer;
font-size: 1.2rem;
transition: background 0.3s ease;
}
.menu-toggle:hover {
background: #764ba2;
}
/* 主内容区域 */
.main-content {
margin-left: 250px;
min-height: 100vh;
}
.section {
min-height: 100vh;
padding: 4rem 3rem;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.section-content {
max-width: 1200px;
width: 100%;
text-align: center;
}
.section h1 {
font-size: 3rem;
margin-bottom: 1.5rem;
color: #333;
opacity: 0;
transform: translateY(30px);
animation: fadeInUp 0.8s ease forwards;
}
.section p {
font-size: 1.2rem;
color: #666;
line-height: 1.8;
opacity: 0;
transform: translateY(30px);
animation: fadeInUp 0.8s ease 0.2s forwards;
}
/* 不同section的背景色 */
#home {
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}
#about {
background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
}
#services {
background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
}
#portfolio {
background: linear-gradient(135deg, #d299c2 0%, #fef9d7 100%);
}
#contact {
background: linear-gradient(135deg, #89f7fe 0%, #66a6ff 100%);
}
/* 动画 */
@keyframes fadeInUp {
to {
opacity: 1;
transform: translateY(0);
}
}
/* 响应式设计 */
@media (max-width: 768px) {
.menu-toggle {
display: block;
}
.sidebar {
transform: translateX(-100%);
}
.sidebar.active {
transform: translateX(0);
}
.main-content {
margin-left: 0;
}
.section {
padding: 2rem 1rem;
}
.section h1 {
font-size: 2rem;
}
.section p {
font-size: 1rem;
}
}
/* 进度指示器 */
.progress-indicator {
position: fixed;
right: 2rem;
top: 50%;
transform: translateY(-50%);
z-index: 999;
}
.progress-dot {
width: 12px;
height: 12px;
border-radius: 50%;
background: rgba(0,0,0,0.3);
margin: 1rem 0;
cursor: pointer;
transition: all 0.3s ease;
}
.progress-dot.active {
background: #667eea;
transform: scale(1.5);
}
/* 返回顶部按钮 */
.back-to-top {
position: fixed;
bottom: 2rem;
right: 2rem;
width: 50px;
height: 50px;
background: #667eea;
color: white;
border: none;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
z-index: 999;
}
.back-to-top.visible {
opacity: 1;
visibility: visible;
}
.back-to-top:hover {
background: #764ba2;
transform: translateY(-5px);
}
</style>
</head>
<body>
<!-- 移动端菜单按钮 -->
<button class="menu-toggle" onclick="toggleSidebar()">☰</button>
<!-- 左侧导航栏 -->
<nav class="sidebar" id="sidebar">
<div class="sidebar-header">
<h2>我的网站</h2>
</div>
<ul class="nav-menu">
<li class="nav-item">
<a href="#home" class="nav-link active" data-section="home">
<span class="nav-icon">🏠</span>
<span>首页</span>
</a>
</li>
<li class="nav-item">
<a href="#about" class="nav-link" data-section="about">
<span class="nav-icon">👤</span>
<span>关于我</span>
</a>
</li>
<li class="nav-item">
<a href="#services" class="nav-link" data-section="services">
<span class="nav-icon">💼</span>
<span>服务</span>
</a>
</li>
<li class="nav-item">
<a href="#portfolio" class="nav-link" data-section="portfolio">
<span class="nav-icon">🎨</span>
<span>作品集</span>
</a>
</li>
<li class="nav-item">
<a href="#contact" class="nav-link" data-section="contact">
<span class="nav-icon">📧</span>
<span>联系我</span>
</a>
</li>
</ul>
</nav>
<!-- 进度指示器 -->
<div class="progress-indicator">
<div class="progress-dot active" data-section="home"></div>
<div class="progress-dot" data-section="about"></div>
<div class="progress-dot" data-section="services"></div>
<div class="progress-dot" data-section="portfolio"></div>
<div class="progress-dot" data-section="contact"></div>
</div>
<!-- 返回顶部按钮 -->
<button class="back-to-top" onclick="scrollToTop()">
<span style="font-size: 1.2rem;">↑</span>
</button>
<!-- 主内容区域 -->
<main class="main-content">
<section id="home" class="section">
<div class="section-content">
<h1>欢迎来到我的网站</h1>
<p>这是一个展示左侧导航滑动定位效果的示例页面，滚动页面时，左侧导航会自动高亮当前所在的部分，同时右侧的进度指示器也会相应更新。</p>
</div>
</section>
<section id="about" class="section">
<div class="section-content">
<h1>关于我</h1>
<p>我是一名前端开发工程师，专注于创建美观且功能强大的网页应用，我热爱编程，喜欢探索新的技术和设计理念。</p>
</div>
</section>
<section id="services" class="section">
<div class="section-content">
<h1>我的服务</h1>
<p>提供网站开发、UI/UX设计、响应式布局、性能优化等服务，致力于为客户打造最佳的数字体验。</p>
</div>
</section>
<section id="portfolio" class="section">
<div class="section-content">
<h1>作品集</h1>
<p>查看我的最新项目，包括企业官网、电商平台、移动应用等，每个项目都体现了我的专业能力和创新思维。</p>
</div>
</section>
<section id="contact" class="section">
<div class="section-content">
<h1>联系我</h1>
<p>如果您对我的服务感兴趣，或者有任何问题，欢迎随时与我联系，期待与您的合作！</p>
</div>
</section>
</main>
<script>
// 获取所有导航链接和section
const navLinks = document.querySelectorAll('.nav-link');
const sections = document.querySelectorAll('.section');
const progressDots = document.querySelectorAll('.progress-dot');
const backToTopBtn = document.querySelector('.back-to-top');
// 平滑滚动到指定section
function smoothScroll(target) {
const element = document.querySelector(target);
const offsetTop = element.offsetTop;
window.scrollTo({
top: offsetTop,
behavior: 'smooth'
});
}
// 更新活动状态
function updateActiveState() {
const scrollPosition = window.scrollY + 100;
sections.forEach((section, index) => {
const sectionTop = section.offsetTop;
const sectionBottom = sectionTop + section.offsetHeight;
if (scrollPosition >= sectionTop && scrollPosition < sectionBottom) {
// 更新导航链接状态
navLinks.forEach(link => link.classList.remove('active'));
const activeLink = document.querySelector(`[data-section="${section.id}"]`);
if (activeLink) activeLink.classList.add('active');
// 更新进度指示器
progressDots.forEach(dot => dot.classList.remove('active'));
const activeDot = document.querySelector(`.progress-dot[data-section="${section.id}"]`);
if (activeDot) activeDot.classList.add('active');
}
});
// 显示/隐藏返回顶部按钮
if (window.scrollY > 300) {
backToTopBtn.classList.add('visible');
} else {
backToTopBtn.classList.remove('visible');
}
}
// 滚动到顶部
function scrollToTop() {
window.scrollTo({
top: 0,
behavior: 'smooth'
});
}
// 切换侧边栏（移动端）
function toggleSidebar() {
const sidebar = document.getElementById('sidebar');
sidebar.classList.toggle('active');
}
// 点击导航链接
navLinks.forEach(link => {
link.addEventListener('click', (e) => {
e.preventDefault();
const target = link.getAttribute('href');
smoothScroll(target);
// 移动端关闭侧边栏
if (window.innerWidth <= 768) {
toggleSidebar();
}
});
});
// 点击进度指示器
progressDots.forEach(dot => {
dot.addEventListener('click', () => {
const target = `#${dot.getAttribute('data-section')}`;
smoothScroll(target);
});
});
// 监听滚动事件
window.addEventListener('scroll', updateActiveState);
// 初始化
updateActiveState();
// 防止快速滚动时的闪烁
let ticking = false;
function requestTick() {
if (!ticking) {
window.requestAnimationFrame(updateActiveState);
ticking = true;
}
}
window.addEventListener('scroll', () => {
requestTick();
ticking = false;
});
</script>
</body>
</html>
这个网页实现了以下功能：
-
左侧导航栏：
- 固定在页面左侧
- 点击导航链接平滑滚动到对应section
- 自动高亮当前所在的section
- 悬停效果和过渡动画
-
滑动定位效果：
- 滚动时自动检测当前所在的section
- 更新导航栏的活动状态
- 右侧进度指示器同步更新
-
响应式设计：
（图片来源网络，侵删）- 移动端显示汉堡菜单按钮
- 点击按钮可以切换侧边栏显示/隐藏
- 自适应不同屏幕尺寸
-
额外功能：
- 返回顶部按钮（滚动时显示）
- 进度指示器（可点击快速跳转）
- 渐变背景色区分不同section
- 平滑的动画过渡效果
你可以根据需要修改颜色、内容、布局等样式,这个代码可以直接保存为HTML文件在浏览器中运行查看效果。
