本文介绍如何通过监听页面滚动位置，自动识别当前可视区域的菜单区块（由 id 标识），并实时高亮顶部对应 ID 的按钮，实现“滚动即激活”的导航联动效果。
本文介绍如何通过监听页面滚动位置，自动识别当前可视区域的菜单区块（由 `id` 标识），并实时高亮顶部对应 id 的按钮，实现“滚动即激活”的导航联动效果。
在构建单页应用（SPA）或长内容菜单页（如餐厅菜品分类页）时，常需实现“滚动定位高亮”功能：当用户向下滚动，页面中某个带 id 的标题区块（如 <h2 id="34">Foul</h2>）进入视口时，顶部固定导航栏中对应 ID 的按钮（如 <button id="16">Foul</button>）应自动切换为选中态（例如改变背景色、文字色等），提升用户体验与视觉引导性。
以下是一个完整、可直接集成的 jQuery 解决方案，已适配您提供的 HTML 结构与 CSS 类名：
✅ 核心逻辑说明
- 为所有待监听的菜单区块（如
<h2 class="menu-group" id="34"></h2>）添加统一类名menug（便于批量查询）； - 为顶部按钮组（如
<div class="translate" id="groups2"> 内的按钮）添加统一类名 <code>grSelected，用于 JS 精准定位； - 滚动时遍历所有
.menug元素，利用自定义isInViewport()方法判断哪个区块首次完全/部分可见（取最后一个匹配项，避免顶部多个区块同时触发冲突）； - 获取该区块的
id，查找.grSelected中id相同的按钮，应用高亮样式；其余按钮则还原默认样式。
✅ 完整可运行代码（含优化与注释）
<!-- 在页面底部或 <head> 中引入 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
// 扩展 jQuery：判断元素是否在视口内
$.fn.isInViewport = function () {
const el = $(this);
const elementTop = el.offset().top;
const elementBottom = elementTop + el.outerHeight();
const viewportTop = $(window).scrollTop();
const viewportBottom = viewportTop + $(window).height();
return elementBottom > viewportTop && elementTop < viewportBottom;
};
// 滚动监听
$(window).scroll(function () {
let activeSectionId = null;
// 遍历所有 .menug 区块，找到最后进入视口的那个
$('.menug').each(function () {
if ($(this).isInViewport()) {
activeSectionId = $(this).attr('id');
}
});
// 若找到活跃区块，则同步更新顶部按钮样式
if (activeSectionId) {
// 重置所有 .grSelected 按钮为默认样式
$('.grSelected').each(function () {
$(this).css({
'background': '#323232',
'color': 'white',
'border': '1px solid #323232',
'border-radius': '8px',
'height': '70px',
'width': 'fit-content',
'text-align': 'center'
});
});
// 高亮匹配 ID 的按钮
const $targetBtn = $(`.grSelected[id="${activeSectionId}"]`);
if ($targetBtn.length) {
$targetBtn.css({
'background': '#3ab9a4',
'color': 'white',
'border': '1px solid #009688',
'border-radius': '8px',
'height': '70px',
'width': 'fit-content',
'text-align': 'center'
});
}
}
}).scroll(); // 触发一次初始检查（防止首屏加载即处于某区块）
});
</script>✅ 前提 HTML 结构改造（关键！）
请确保您的 HTML 符合以下规范，否则脚本无法精准匹配：
-
为每个菜单标题区块添加
class="menug"和唯一id（如您已有<h2 id="34" class="menu-group">Foul</h2>，只需补充menug类）：<h2 id="34" class="menu-group menug">Foul</h2> <h2 id="35" class="menu-group menug">Gelabah</h2> <!-- ... -->
-
为顶部按钮添加
class="grSelected"并确保id与下方区块id逻辑对应（注意：您原代码中按钮id="16"与标题id="34"不一致，需统一）：<div class="translate" id="groups2"> <button id="34" class="button grSelected"><p>Foul</p></button> <button id="35" class="button grSelected"><p>Gelabah</p></button> <button id="36" class="button grSelected"><p>Salts Motabag</p></button> <!-- ... --> </div>
? 重要提示：按钮
id必须与对应菜单区块id完全一致（如都为"34"），这是匹配的核心依据。若需保留原有数字编号（如16），可在按钮上添加data-section-id="34"属性，并将 JS 中的$(.grSelected[id="${activeSectionId}"])改为$(.grSelected[data-section-id="${activeSectionId}"])。
✅ 性能与兼容性建议
- ✅ 使用
$(window).scroll()时，建议添加防抖（debounce）以避免高频触发（尤其在移动端）； - ✅ 如项目已使用现代框架（Vue/React），推荐用 Intersection Observer API 替代 jQuery 方案，性能更优；
- ✅ 样式部分建议抽离为 CSS 类（如
.btn-active），通过addClass()/removeClass()控制，而非内联css()，利于维护与主题切换。
通过以上实现，您即可获得流畅、精准的滚动高亮导航体验——用户滑动页面时，顶部按钮将智能响应，清晰指示当前所处内容区块。
