jQuery UI粘性导航实现详解从理论到实践全面解析如何创建固定在页面顶部的导航栏让用户随时可以访问网站菜单提升浏览体验

引言

在当今的网页设计中，用户体验是至关重要的因素。粘性导航（Sticky Navigation）作为提升用户体验的重要元素，已经成为了现代网站设计的标准配置。所谓粘性导航，是指当用户向下滚动页面时，导航栏能够固定在页面顶部，始终可见，让用户可以随时访问网站的各个部分，而不必返回页面顶部。

jQuery UI作为一个强大的JavaScript库，提供了丰富的交互组件和效果，使得实现粘性导航变得简单而高效。本文将从理论基础出发，详细讲解如何使用jQuery UI创建粘性导航，并通过实际代码示例，帮助读者掌握这一技术。

理论基础

什么是粘性导航

粘性导航是一种网页设计技术，它允许导航栏在用户滚动页面时保持在视口的特定位置（通常是顶部）。这种设计模式的主要优点是：

提高网站可用性：用户无需滚动回页面顶部即可访问导航菜单
改善用户体验：减少用户的操作步骤，提高浏览效率
增强导航可见性：确保导航选项始终可见，提高网站的整体导航性

jQuery UI简介

jQuery UI是基于jQuery的一个用户界面库，它提供了一系列可交互的UI组件、效果和主题。使用jQuery UI可以轻松创建功能丰富、视觉吸引的网页界面，而无需编写大量的JavaScript代码。

jQuery UI的主要特点包括：

丰富的交互组件：如拖放、排序、选择等
多样的视觉效果：如淡入淡出、滑动、弹跳等动画效果
可定制的主题：通过ThemeRoller工具可以轻松定制网站的外观
跨浏览器兼容性：支持主流浏览器，减少兼容性问题

粘性导航的工作原理

粘性导航的实现原理主要基于以下几点：

监听滚动事件：通过JavaScript监听页面的滚动事件
检测元素位置：判断导航栏是否已经滚动到视口顶部
切换CSS类：当导航栏到达视口顶部时，添加一个固定定位的CSS类
应用样式：通过CSS控制导航栏在固定状态下的外观和行为

实践准备

环境搭建

在开始实现粘性导航之前，我们需要准备以下环境和资源：

文本编辑器：如Visual Studio Code、Sublime Text等
现代浏览器：如Chrome、Firefox、Safari等
jQuery库：从jQuery官网（https://jquery.com/）下载最新版本
jQuery UI库：从jQuery UI官网（https://jqueryui.com/）下载最新版本

项目结构

创建一个基本的项目结构，如下所示：

sticky-navigation/ ├── css/ │ ├── style.css │ └── jquery-ui.min.css ├── js/ │ ├── jquery.min.js │ ├── jquery-ui.min.js │ └── script.js └── index.html

引入必要的库

在index.html文件中，我们需要引入jQuery和jQuery UI库：

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>jQuery UI粘性导航实现</title> <link rel="stylesheet" href="css/jquery-ui.min.css"> <link rel="stylesheet" href="css/style.css"> </head> <body> <!-- 页面内容 --> <script src="js/jquery.min.js"></script> <script src="js/jquery-ui.min.js"></script> <script src="js/script.js"></script> </body> </html>

基本实现

HTML结构

首先，我们需要创建一个基本的HTML结构，包含导航栏和页面内容：

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>jQuery UI粘性导航实现</title> <link rel="stylesheet" href="css/jquery-ui.min.css"> <link rel="stylesheet" href="css/style.css"> </head> <body> <header> <div class="logo"> <a href="/">网站Logo</a> </div> <nav id="main-nav"> <ul> <li><a href="#home">首页</a></li> <li><a href="#about">关于我们</a></li> <li><a href="#services">服务</a></li> <li><a href="#portfolio">作品集</a></li> <li><a href="#contact">联系我们</a></li> </ul> </nav> </header> <main> <section id="home"> <h1>欢迎来到我们的网站</h1> <p>这里是网站的主要内容区域...</p> </section> <section id="about"> <h2>关于我们</h2> <p>这里是关于我们的内容...</p> </section> <section id="services"> <h2>我们的服务</h2> <p>这里是我们提供的服务内容...</p> </section> <section id="portfolio"> <h2>作品集</h2> <p>这里展示我们的作品...</p> </section> <section id="contact"> <h2>联系我们</h2> <p>这里是联系我们的方式...</p> </section> </main> <script src="js/jquery.min.js"></script> <script src="js/jquery-ui.min.js"></script> <script src="js/script.js"></script> </body> </html>

CSS样式

接下来，我们需要为导航栏和页面内容添加一些基本的CSS样式：

/* 基本样式重置 */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Arial', sans-serif; line-height: 1.6; color: #333; } /* 头部样式 */ header { background-color: #fff; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); padding: 1rem 0; position: relative; z-index: 1000; width: 100%; transition: all 0.3s ease; } .logo { float: left; margin-left: 2rem; } .logo a { text-decoration: none; color: #333; font-size: 1.5rem; font-weight: bold; } /* 导航栏样式 */ #main-nav { float: right; margin-right: 2rem; } #main-nav ul { list-style: none; display: flex; } #main-nav ul li { margin-left: 1.5rem; } #main-nav ul li a { text-decoration: none; color: #333; font-weight: 500; transition: color 0.3s ease; } #main-nav ul li a:hover { color: #007bff; } /* 粘性导航样式 */ .sticky { position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); animation: slideDown 0.3s ease; } @keyframes slideDown { from { transform: translateY(-100%); } to { transform: translateY(0); } } /* 内容区域样式 */ section { padding: 4rem 2rem; max-width: 1200px; margin: 0 auto; } section:nth-child(even) { background-color: #f9f9f9; } h1 { font-size: 2.5rem; margin-bottom: 1rem; } h2 { font-size: 2rem; margin-bottom: 1rem; } p { margin-bottom: 1rem; font-size: 1.1rem; } /* 响应式设计 */ @media (max-width: 768px) { header { text-align: center; } .logo { float: none; margin-left: 0; margin-bottom: 1rem; } #main-nav { float: none; margin-right: 0; } #main-nav ul { justify-content: center; } #main-nav ul li { margin: 0 0.5rem; } }

JavaScript实现

现在，我们需要使用jQuery和jQuery UI来实现粘性导航的功能。在script.js文件中添加以下代码：

$(document).ready(function() { // 获取导航栏元素 var mainNav = $('#main-nav').parent('header'); // 获取导航栏的初始位置 var navOffset = mainNav.offset().top; // 监听滚动事件 $(window).scroll(function() { // 获取当前滚动位置 var scrollPos = $(window).scrollTop(); // 如果滚动位置超过导航栏的初始位置，添加sticky类 if (scrollPos > navOffset) { if (!mainNav.hasClass('sticky')) { // 使用jQuery UI的动画效果 mainNav.addClass('sticky').hide().slideDown(300); } } else { // 否则移除sticky类 if (mainNav.hasClass('sticky')) { mainNav.removeClass('sticky'); } } }); // 平滑滚动到锚点 $('a[href^="#"]').on('click', function(e) { e.preventDefault(); var target = $(this.getAttribute('href')); if (target.length) { // 计算滚动位置，考虑粘性导航的高度 var scrollPosition = target.offset().top - mainNav.outerHeight(); // 使用jQuery UI的动画效果平滑滚动 $('html, body').animate({ scrollTop: scrollPosition }, 800, 'swing'); } }); // 高亮当前部分的导航链接 $(window).scroll(function() { var scrollPosition = $(window).scrollTop(); // 获取所有section元素 $('section').each(function() { var target = $(this); var id = target.attr('id'); // 计算每个section的位置 var offsetTop = target.offset().top - mainNav.outerHeight() - 20; var offsetBottom = offsetTop + target.outerHeight(); // 如果滚动位置在当前section范围内 if (scrollPosition >= offsetTop && scrollPosition < offsetBottom) { // 移除所有导航链接的活动状态 $('#main-nav ul li a').removeClass('active'); // 添加当前导航链接的活动状态 $('#main-nav ul li a[href="#' + id + '"]').addClass('active'); } }); }); });

添加活动状态的CSS样式

为了增强用户体验，我们还需要为当前活动状态的导航链接添加样式。在style.css文件中添加以下代码：

/* 导航链接活动状态 */ #main-nav ul li a.active { color: #007bff; border-bottom: 2px solid #007bff; padding-bottom: 5px; }

高级功能

添加响应式菜单

在小屏幕设备上，水平导航栏可能会占用太多空间。我们可以添加一个响应式菜单按钮，当屏幕宽度小于某个阈值时，将导航链接隐藏在汉堡菜单中。

首先，修改HTML结构，添加菜单按钮：

<header> <div class="logo"> <a href="/">网站Logo</a> </div> <div class="menu-toggle"> <span></span> <span></span> <span></span> </div> <nav id="main-nav"> <ul> <li><a href="#home">首页</a></li> <li><a href="#about">关于我们</a></li> <li><a href="#services">服务</a></li> <li><a href="#portfolio">作品集</a></li> <li><a href="#contact">联系我们</a></li> </ul> </nav> </header>

然后，添加相应的CSS样式：

/* 菜单按钮样式 */ .menu-toggle { display: none; flex-direction: column; justify-content: space-between; width: 30px; height: 21px; cursor: pointer; position: absolute; right: 2rem; top: 1.5rem; } .menu-toggle span { display: block; height: 3px; width: 100%; background-color: #333; border-radius: 3px; transition: all 0.3s ease; } /* 响应式设计 */ @media (max-width: 768px) { header { text-align: center; padding: 1rem 0; } .logo { float: none; margin-left: 0; margin-bottom: 1rem; } .menu-toggle { display: flex; } #main-nav { float: none; margin-right: 0; display: none; width: 100%; background-color: #fff; margin-top: 1rem; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); } #main-nav.show { display: block; } #main-nav ul { flex-direction: column; padding: 1rem 0; } #main-nav ul li { margin: 0.5rem 0; } .sticky #main-nav { margin-top: 0; } }

最后，添加JavaScript代码来控制菜单的显示和隐藏：

// 响应式菜单控制 $('.menu-toggle').on('click', function() { $('#main-nav').toggleClass('show'); // 添加动画效果 if ($('#main-nav').hasClass('show')) { $('#main-nav').hide().slideDown(300); } else { $('#main-nav').slideUp(300, function() { $(this).removeClass('show'); }); } // 切换菜单按钮的动画效果 $(this).toggleClass('active'); }); // 当点击导航链接后关闭菜单 $('#main-nav ul li a').on('click', function() { if ($(window).width() <= 768) { $('#main-nav').removeClass('show'); $('.menu-toggle').removeClass('active'); } }); // 当窗口大小改变时，重置菜单状态 $(window).resize(function() { if ($(window).width() > 768) { $('#main-nav').removeClass('show'); $('.menu-toggle').removeClass('active'); } });

添加滚动指示器

为了进一步增强用户体验，我们可以添加一个滚动指示器，显示用户在页面中的位置。这可以通过一个进度条或一个指示器来实现。

首先，在HTML中添加滚动指示器：

<div class="scroll-indicator"> <div class="progress"></div> </div>

然后，添加相应的CSS样式：

/* 滚动指示器样式 */ .scroll-indicator { position: fixed; top: 0; left: 0; width: 100%; height: 4px; background-color: #f0f0f0; z-index: 1001; } .scroll-indicator .progress { height: 100%; width: 0; background-color: #007bff; transition: width 0.1s ease; } /* 当导航栏变为粘性时，调整滚动指示器的位置 */ .sticky + .scroll-indicator { top: auto; bottom: 0; }

最后，添加JavaScript代码来更新滚动指示器：

// 滚动指示器 $(window).scroll(function() { var scrollHeight = $(document).height() - $(window).height(); var scrollProgress = ($(window).scrollTop() / scrollHeight) * 100; $('.scroll-indicator .progress').css('width', scrollProgress + '%'); });

添加返回顶部按钮

当页面内容很长时，添加一个返回顶部的按钮可以提升用户体验。

首先，在HTML中添加返回顶部按钮：

<div class="back-to-top"> <i class="arrow-up"></i> </div>

然后，添加相应的CSS样式：

/* 返回顶部按钮样式 */ .back-to-top { position: fixed; bottom: 2rem; right: 2rem; width: 40px; height: 40px; background-color: #007bff; color: #fff; border-radius: 50%; display: flex; justify-content: center; align-items: center; cursor: pointer; opacity: 0; visibility: hidden; transition: all 0.3s ease; z-index: 999; } .back-to-top.show { opacity: 1; visibility: visible; } .back-to-top:hover { background-color: #0056b3; transform: translateY(-5px); } .arrow-up { width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 12px solid #fff; }

最后，添加JavaScript代码来控制返回顶部按钮的显示和功能：

// 返回顶部按钮 $(window).scroll(function() { if ($(this).scrollTop() > 300) { $('.back-to-top').addClass('show'); } else { $('.back-to-top').removeClass('show'); } }); $('.back-to-top').on('click', function(e) { e.preventDefault(); // 使用jQuery UI的动画效果平滑滚动到顶部 $('html, body').animate({ scrollTop: 0 }, 800, 'swing'); });

性能优化

使用节流（Throttling）优化滚动事件

滚动事件会频繁触发，可能导致性能问题。我们可以使用节流技术来限制滚动事件的触发频率。

// 节流函数 function throttle(func, delay) { let lastCall = 0; return function(...args) { const now = new Date().getTime(); if (now - lastCall < delay) { return; } lastCall = now; return func(...args); }; } // 使用节流优化的滚动事件处理 $(window).scroll(throttle(function() { var scrollPos = $(window).scrollTop(); // 粘性导航逻辑 if (scrollPos > navOffset) { if (!mainNav.hasClass('sticky')) { mainNav.addClass('sticky').hide().slideDown(300); } } else { if (mainNav.hasClass('sticky')) { mainNav.removeClass('sticky'); } } // 导航链接活动状态逻辑 $('section').each(function() { var target = $(this); var id = target.attr('id'); var offsetTop = target.offset().top - mainNav.outerHeight() - 20; var offsetBottom = offsetTop + target.outerHeight(); if (scrollPos >= offsetTop && scrollPos < offsetBottom) { $('#main-nav ul li a').removeClass('active'); $('#main-nav ul li a[href="#' + id + '"]').addClass('active'); } }); // 滚动指示器逻辑 var scrollHeight = $(document).height() - $(window).height(); var scrollProgress = (scrollPos / scrollHeight) * 100; $('.scroll-indicator .progress').css('width', scrollProgress + '%'); // 返回顶部按钮逻辑 if (scrollPos > 300) { $('.back-to-top').addClass('show'); } else { $('.back-to-top').removeClass('show'); } }, 100)); // 每100毫秒最多执行一次

使用requestAnimationFrame优化动画

使用requestAnimationFrame可以进一步优化动画性能，使动画更加流畅。

// 使用requestAnimationFrame优化的动画函数 function animateScroll(targetPosition, duration) { const startPosition = $(window).scrollTop(); const distance = targetPosition - startPosition; let startTime = null; function animation(currentTime) { if (startTime === null) startTime = currentTime; const timeElapsed = currentTime - startTime; const run = ease(timeElapsed, startPosition, distance, duration); $(window).scrollTop(run); if (timeElapsed < duration) { requestAnimationFrame(animation); } } // 缓动函数 function ease(t, b, c, d) { t /= d / 2; if (t < 1) return c / 2 * t * t + b; t--; return -c / 2 * (t * (t - 2) - 1) + b; } requestAnimationFrame(animation); } // 使用优化后的动画函数替换原来的animate $('a[href^="#"]').on('click', function(e) { e.preventDefault(); var target = $(this.getAttribute('href')); if (target.length) { var scrollPosition = target.offset().top - mainNav.outerHeight(); animateScroll(scrollPosition, 800); } }); $('.back-to-top').on('click', function(e) { e.preventDefault(); animateScroll(0, 800); });

使用Intersection Observer API

现代浏览器支持Intersection Observer API，它可以更高效地检测元素是否进入视口，而不需要依赖滚动事件。

// 检查浏览器是否支持Intersection Observer if ('IntersectionObserver' in window) { // 创建Intersection Observer实例 const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { const id = entry.target.getAttribute('id'); $('#main-nav ul li a').removeClass('active'); $('#main-nav ul li a[href="#' + id + '"]').addClass('active'); } }); }, { // 设置根元素和阈值 root: null, rootMargin: `-${mainNav.outerHeight() + 20}px 0px -80% 0px`, threshold: 0 }); // 观察所有section元素 $('section').each(function() { observer.observe(this); }); } else { // 如果不支持Intersection Observer，则使用滚动事件作为后备方案 $(window).scroll(throttle(function() { var scrollPos = $(window).scrollTop(); $('section').each(function() { var target = $(this); var id = target.attr('id'); var offsetTop = target.offset().top - mainNav.outerHeight() - 20; var offsetBottom = offsetTop + target.outerHeight(); if (scrollPos >= offsetTop && scrollPos < offsetBottom) { $('#main-nav ul li a').removeClass('active'); $('#main-nav ul li a[href="#' + id + '"]').addClass('active'); } }); }, 100)); }

常见问题与解决方案

问题1：导航栏固定后，页面内容突然跳动

问题描述：当导航栏变为固定定位时，它脱离了正常的文档流，导致页面内容突然向上跳动。

解决方案：为导航栏添加一个占位元素，当导航栏变为固定定位时，显示占位元素，保持页面布局的稳定性。

修改HTML结构：

<header> <div class="logo"> <a href="/">网站Logo</a> </div> <div class="menu-toggle"> <span></span> <span></span> <span></span> </div> <nav id="main-nav"> <ul> <li><a href="#home">首页</a></li> <li><a href="#about">关于我们</a></li> <li><a href="#services">服务</a></li> <li><a href="#portfolio">作品集</a></li> <li><a href="#contact">联系我们</a></li> </ul> </nav> </header> <!-- 添加占位元素 --> <div class="nav-placeholder"></div>

添加CSS样式：

/* 导航占位元素 */ .nav-placeholder { display: none; height: 0; } .sticky + .nav-placeholder { display: block; height: 70px; /* 与导航栏高度相同 */ }

问题2：固定导航栏覆盖页面内容

问题描述：当导航栏变为固定定位后，它可能会覆盖页面顶部的部分内容。

解决方案：为页面内容添加一个顶部内边距，确保内容不会被导航栏覆盖。

修改CSS样式：

/* 内容区域样式 */ section { padding: 4rem 2rem; max-width: 1200px; margin: 0 auto; } /* 为第一个section添加额外的顶部内边距 */ section:first-of-type { padding-top: 6rem; } /* 响应式调整 */ @media (max-width: 768px) { section:first-of-type { padding-top: 8rem; } }

问题3：在移动设备上，导航栏占用太多空间

问题描述：在移动设备上，固定导航栏可能会占用宝贵的屏幕空间，影响内容浏览。

解决方案：实现一个可折叠的导航栏，当用户向下滚动时自动隐藏，向上滚动时显示。

添加CSS样式：

/* 导航栏隐藏状态 */ .nav-hidden { transform: translateY(-100%); } /* 确保过渡效果平滑 */ header { transition: transform 0.3s ease; }

修改JavaScript代码：

// 添加变量跟踪滚动方向 var lastScrollTop = 0; var scrollDelta = 5; // 滚动阈值 $(window).scroll(throttle(function() { var scrollPos = $(window).scrollTop(); // 粘性导航逻辑 if (scrollPos > navOffset) { if (!mainNav.hasClass('sticky')) { mainNav.addClass('sticky').hide().slideDown(300); } // 检测滚动方向 if (Math.abs(lastScrollTop - scrollPos) <= scrollDelta) { return; } // 向下滚动隐藏导航栏 if (scrollPos > lastScrollTop && scrollPos > navOffset + mainNav.outerHeight()) { mainNav.addClass('nav-hidden'); } // 向上滚动显示导航栏 else { mainNav.removeClass('nav-hidden'); } } else { if (mainNav.hasClass('sticky')) { mainNav.removeClass('sticky'); } } lastScrollTop = scrollPos; // 其他逻辑... }, 100));

问题4：锚点链接定位不准确

问题描述：当点击导航链接跳转到页面某个部分时，由于固定导航栏的存在，目标位置可能会被导航栏遮挡。

解决方案：在计算滚动位置时，考虑导航栏的高度。

修改JavaScript代码：

$('a[href^="#"]').on('click', function(e) { e.preventDefault(); var target = $(this.getAttribute('href')); if (target.length) { // 计算滚动位置，考虑导航栏的高度 var navHeight = mainNav.hasClass('sticky') ? mainNav.outerHeight() : 0; var scrollPosition = target.offset().top - navHeight - 20; // 额外的20px作为间距 animateScroll(scrollPosition, 800); } });

问题5：导航栏在固定状态下样式变化

问题描述：当导航栏变为固定定位时，可能需要调整其样式以适应新的定位方式。

解决方案：为固定状态的导航栏添加特定的样式。

修改CSS样式：

/* 粘性导航样式 */ .sticky { position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); animation: slideDown 0.3s ease; padding: 0.5rem 0; /* 减少内边距 */ } .sticky .logo { margin-top: 0.5rem; /* 调整Logo位置 */ } .sticky #main-nav { margin-top: 0; /* 调整导航位置 */ } @keyframes slideDown { from { transform: translateY(-100%); } to { transform: translateY(0); } }

完整示例代码

下面是整合了所有功能的完整示例代码：

HTML (index.html)

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>jQuery UI粘性导航实现</title> <link rel="stylesheet" href="css/jquery-ui.min.css"> <link rel="stylesheet" href="css/style.css"> </head> <body> <!-- 滚动指示器 --> <div class="scroll-indicator"> <div class="progress"></div> </div> <header> <div class="logo"> <a href="/">网站Logo</a> </div> <div class="menu-toggle"> <span></span> <span></span> <span></span> </div> <nav id="main-nav"> <ul> <li><a href="#home">首页</a></li> <li><a href="#about">关于我们</a></li> <li><a href="#services">服务</a></li> <li><a href="#portfolio">作品集</a></li> <li><a href="#contact">联系我们</a></li> </ul> </nav> </header> <!-- 导航占位元素 --> <div class="nav-placeholder"></div> <main> <section id="home"> <h1>欢迎来到我们的网站</h1> <p>这里是网站的主要内容区域。您可以向下滚动页面来查看粘性导航的效果。</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam auctor, nisl eget ultricies tincidunt, nisl nisl aliquam nisl, eget ultricies nisl nisl eget nisl. Nullam auctor, nisl eget ultricies tincidunt, nisl nisl aliquam nisl, eget ultricies nisl nisl eget nisl.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam auctor, nisl eget ultricies tincidunt, nisl nisl aliquam nisl, eget ultricies nisl nisl eget nisl. Nullam auctor, nisl eget ultricies tincidunt, nisl nisl aliquam nisl, eget ultricies nisl nisl eget nisl.</p> </section> <section id="about"> <h2>关于我们</h2> <p>这里是关于我们的内容。我们是一家专业的网站设计公司，致力于为客户提供高质量的网站解决方案。</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam auctor, nisl eget ultricies tincidunt, nisl nisl aliquam nisl, eget ultricies nisl nisl eget nisl. Nullam auctor, nisl eget ultricies tincidunt, nisl nisl aliquam nisl, eget ultricies nisl nisl eget nisl.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam auctor, nisl eget ultricies tincidunt, nisl nisl aliquam nisl, eget ultricies nisl nisl eget nisl. Nullam auctor, nisl eget ultricies tincidunt, nisl nisl aliquam nisl, eget ultricies nisl nisl eget nisl.</p> </section> <section id="services"> <h2>我们的服务</h2> <p>这里是我们提供的服务内容。我们提供网站设计、网站开发、移动应用开发等服务。</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam auctor, nisl eget ultricies tincidunt, nisl nisl aliquam nisl, eget ultricies nisl nisl eget nisl. Nullam auctor, nisl eget ultricies tincidunt, nisl nisl aliquam nisl, eget ultricies nisl nisl eget nisl.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam auctor, nisl eget ultricies tincidunt, nisl nisl aliquam nisl, eget ultricies nisl nisl eget nisl. Nullam auctor, nisl eget ultricies tincidunt, nisl nisl aliquam nisl, eget ultricies nisl nisl eget nisl.</p> </section> <section id="portfolio"> <h2>作品集</h2> <p>这里展示我们的作品。我们已经为众多客户提供了优质的网站设计服务。</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam auctor, nisl eget ultricies tincidunt, nisl nisl aliquam nisl, eget ultricies nisl nisl eget nisl. Nullam auctor, nisl eget ultricies tincidunt, nisl nisl aliquam nisl, eget ultricies nisl nisl eget nisl.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam auctor, nisl eget ultricies tincidunt, nisl nisl aliquam nisl, eget ultricies nisl nisl eget nisl. Nullam auctor, nisl eget ultricies tincidunt, nisl nisl aliquam nisl, eget ultricies nisl nisl eget nisl.</p> </section> <section id="contact"> <h2>联系我们</h2> <p>这里是联系我们的方式。如果您有任何问题或需求，请随时与我们联系。</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam auctor, nisl eget ultricies tincidunt, nisl nisl aliquam nisl, eget ultricies nisl nisl eget nisl. Nullam auctor, nisl eget ultricies tincidunt, nisl nisl aliquam nisl, eget ultricies nisl nisl eget nisl.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam auctor, nisl eget ultricies tincidunt, nisl nisl aliquam nisl, eget ultricies nisl nisl eget nisl. Nullam auctor, nisl eget ultricies tincidunt, nisl nisl aliquam nisl, eget ultricies nisl nisl eget nisl.</p> </section> </main> <!-- 返回顶部按钮 --> <div class="back-to-top"> <i class="arrow-up"></i> </div> <script src="js/jquery.min.js"></script> <script src="js/jquery-ui.min.js"></script> <script src="js/script.js"></script> </body> </html>

CSS (css/style.css)

/* 基本样式重置 */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Arial', sans-serif; line-height: 1.6; color: #333; } /* 滚动指示器样式 */ .scroll-indicator { position: fixed; top: 0; left: 0; width: 100%; height: 4px; background-color: #f0f0f0; z-index: 1001; } .scroll-indicator .progress { height: 100%; width: 0; background-color: #007bff; transition: width 0.1s ease; } /* 头部样式 */ header { background-color: #fff; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); padding: 1rem 0; position: relative; z-index: 1000; width: 100%; transition: all 0.3s ease; } .logo { float: left; margin-left: 2rem; } .logo a { text-decoration: none; color: #333; font-size: 1.5rem; font-weight: bold; } /* 菜单按钮样式 */ .menu-toggle { display: none; flex-direction: column; justify-content: space-between; width: 30px; height: 21px; cursor: pointer; position: absolute; right: 2rem; top: 1.5rem; } .menu-toggle span { display: block; height: 3px; width: 100%; background-color: #333; border-radius: 3px; transition: all 0.3s ease; } /* 导航栏样式 */ #main-nav { float: right; margin-right: 2rem; } #main-nav ul { list-style: none; display: flex; } #main-nav ul li { margin-left: 1.5rem; } #main-nav ul li a { text-decoration: none; color: #333; font-weight: 500; transition: color 0.3s ease; } #main-nav ul li a:hover { color: #007bff; } /* 导航链接活动状态 */ #main-nav ul li a.active { color: #007bff; border-bottom: 2px solid #007bff; padding-bottom: 5px; } /* 粘性导航样式 */ .sticky { position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); animation: slideDown 0.3s ease; padding: 0.5rem 0; } .sticky .logo { margin-top: 0.5rem; } .sticky #main-nav { margin-top: 0; } @keyframes slideDown { from { transform: translateY(-100%); } to { transform: translateY(0); } } /* 导航栏隐藏状态 */ .nav-hidden { transform: translateY(-100%); } /* 导航占位元素 */ .nav-placeholder { display: none; height: 0; } .sticky + .nav-placeholder { display: block; height: 70px; } /* 内容区域样式 */ section { padding: 4rem 2rem; max-width: 1200px; margin: 0 auto; } section:first-of-type { padding-top: 6rem; } section:nth-child(even) { background-color: #f9f9f9; } h1 { font-size: 2.5rem; margin-bottom: 1rem; } h2 { font-size: 2rem; margin-bottom: 1rem; } p { margin-bottom: 1rem; font-size: 1.1rem; } /* 返回顶部按钮样式 */ .back-to-top { position: fixed; bottom: 2rem; right: 2rem; width: 40px; height: 40px; background-color: #007bff; color: #fff; border-radius: 50%; display: flex; justify-content: center; align-items: center; cursor: pointer; opacity: 0; visibility: hidden; transition: all 0.3s ease; z-index: 999; } .back-to-top.show { opacity: 1; visibility: visible; } .back-to-top:hover { background-color: #0056b3; transform: translateY(-5px); } .arrow-up { width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 12px solid #fff; } /* 响应式设计 */ @media (max-width: 768px) { header { text-align: center; padding: 1rem 0; } .logo { float: none; margin-left: 0; margin-bottom: 1rem; } .menu-toggle { display: flex; } #main-nav { float: none; margin-right: 0; display: none; width: 100%; background-color: #fff; margin-top: 1rem; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); } #main-nav.show { display: block; } #main-nav ul { flex-direction: column; padding: 1rem 0; } #main-nav ul li { margin: 0.5rem 0; } .sticky #main-nav { margin-top: 0; } section:first-of-type { padding-top: 8rem; } }

JavaScript (js/script.js)

$(document).ready(function() { // 获取导航栏元素 var mainNav = $('#main-nav').parent('header'); // 获取导航栏的初始位置 var navOffset = mainNav.offset().top; // 添加变量跟踪滚动方向 var lastScrollTop = 0; var scrollDelta = 5; // 滚动阈值 // 节流函数 function throttle(func, delay) { let lastCall = 0; return function(...args) { const now = new Date().getTime(); if (now - lastCall < delay) { return; } lastCall = now; return func(...args); }; } // 使用requestAnimationFrame优化的动画函数 function animateScroll(targetPosition, duration) { const startPosition = $(window).scrollTop(); const distance = targetPosition - startPosition; let startTime = null; function animation(currentTime) { if (startTime === null) startTime = currentTime; const timeElapsed = currentTime - startTime; const run = ease(timeElapsed, startPosition, distance, duration); $(window).scrollTop(run); if (timeElapsed < duration) { requestAnimationFrame(animation); } } // 缓动函数 function ease(t, b, c, d) { t /= d / 2; if (t < 1) return c / 2 * t * t + b; t--; return -c / 2 * (t * (t - 2) - 1) + b; } requestAnimationFrame(animation); } // 使用节流优化的滚动事件处理 $(window).scroll(throttle(function() { var scrollPos = $(window).scrollTop(); // 粘性导航逻辑 if (scrollPos > navOffset) { if (!mainNav.hasClass('sticky')) { mainNav.addClass('sticky').hide().slideDown(300); } // 检测滚动方向 if (Math.abs(lastScrollTop - scrollPos) <= scrollDelta) { return; } // 向下滚动隐藏导航栏 if (scrollPos > lastScrollTop && scrollPos > navOffset + mainNav.outerHeight()) { mainNav.addClass('nav-hidden'); } // 向上滚动显示导航栏 else { mainNav.removeClass('nav-hidden'); } } else { if (mainNav.hasClass('sticky')) { mainNav.removeClass('sticky'); } } lastScrollTop = scrollPos; // 导航链接活动状态逻辑 $('section').each(function() { var target = $(this); var id = target.attr('id'); var offsetTop = target.offset().top - mainNav.outerHeight() - 20; var offsetBottom = offsetTop + target.outerHeight(); if (scrollPos >= offsetTop && scrollPos < offsetBottom) { $('#main-nav ul li a').removeClass('active'); $('#main-nav ul li a[href="#' + id + '"]').addClass('active'); } }); // 滚动指示器逻辑 var scrollHeight = $(document).height() - $(window).height(); var scrollProgress = (scrollPos / scrollHeight) * 100; $('.scroll-indicator .progress').css('width', scrollProgress + '%'); // 返回顶部按钮逻辑 if (scrollPos > 300) { $('.back-to-top').addClass('show'); } else { $('.back-to-top').removeClass('show'); } }, 100)); // 平滑滚动到锚点 $('a[href^="#"]').on('click', function(e) { e.preventDefault(); var target = $(this.getAttribute('href')); if (target.length) { // 计算滚动位置，考虑导航栏的高度 var navHeight = mainNav.hasClass('sticky') ? mainNav.outerHeight() : 0; var scrollPosition = target.offset().top - navHeight - 20; // 额外的20px作为间距 animateScroll(scrollPosition, 800); } }); // 响应式菜单控制 $('.menu-toggle').on('click', function() { $('#main-nav').toggleClass('show'); // 添加动画效果 if ($('#main-nav').hasClass('show')) { $('#main-nav').hide().slideDown(300); } else { $('#main-nav').slideUp(300, function() { $(this).removeClass('show'); }); } // 切换菜单按钮的动画效果 $(this).toggleClass('active'); }); // 当点击导航链接后关闭菜单 $('#main-nav ul li a').on('click', function() { if ($(window).width() <= 768) { $('#main-nav').removeClass('show'); $('.menu-toggle').removeClass('active'); } }); // 当窗口大小改变时，重置菜单状态 $(window).resize(function() { if ($(window).width() > 768) { $('#main-nav').removeClass('show'); $('.menu-toggle').removeClass('active'); } }); // 返回顶部按钮 $('.back-to-top').on('click', function(e) { e.preventDefault(); animateScroll(0, 800); }); // 检查浏览器是否支持Intersection Observer if ('IntersectionObserver' in window) { // 创建Intersection Observer实例 const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { const id = entry.target.getAttribute('id'); $('#main-nav ul li a').removeClass('active'); $('#main-nav ul li a[href="#' + id + '"]').addClass('active'); } }); }, { // 设置根元素和阈值 root: null, rootMargin: `-${mainNav.outerHeight() + 20}px 0px -80% 0px`, threshold: 0 }); // 观察所有section元素 $('section').each(function() { observer.observe(this); }); } });