本文介绍一种基于 jQuery 的滚动监听方案，通过检测导航栏当前覆盖的背景区域（如 .white_div 或 .dark_div），动态为固定定位的菜单项切换 menu_white / menu_black 样式类，实现文字颜色随背景明暗自适应。
本文介绍一种基于 jquery 的滚动监听方案，通过检测导航栏当前覆盖的背景区域（如 `.white_div` 或 `.dark_div`），动态为固定定位的菜单项切换 `menu_white` / `menu_black` 样式类，实现文字颜色随背景明暗自适应。
在构建响应式单页网站时，常需让固定定位（position: fixed）的导航栏文字颜色随下方内容区域的背景色智能切换——例如：当导航悬浮于白色区块上方时显示黑色文字，覆盖深色区块时则切换为白色文字。但原始代码存在关键逻辑缺陷：它仅获取首个 .white_div 的位置与高度，却未考虑多个同类区块的连续分布，导致判断范围失准，无法适配多段白底区域。
✅ 正确思路：按区域区间动态判断
核心在于将页面划分为若干“语义化背景区块”，并实时计算导航栏顶部（.menu-item）相对于视口的垂直位置（menu_pos），再逐一比对它是否落入某个特定背景类（如 .white_div）的可视范围内。
由于所有 .white_div 高度一致（本例中为 150px），可采用批量高度聚合策略：
- 使用 $('.white_div').length 获取白底区块总数；
- 乘以单个高度 $('.white_div').height()，得到全部白底区域的总高度；
- 结合首个白底区块的起始位置 $('.white_div').offset().top，即可确定整个白底区间的全局范围 [start, start + totalHeight]。
但注意：此简化方法仅适用于所有 .white_div 连续、无间隔、且高度严格一致的场景。更健壮的通用解法应遍历每个 .white_div，逐个判断 menu_pos 是否落在其 top 与 top + height 之间。
✅ 推荐实现（兼容多区块、非连续布局）
$(document).ready(function() {
function updateMenuColor() {
const menu = $('.menu-item');
const menuTop = menu.offset().top; // 导航栏距文档顶部距离（注意：fixed 元素 offset() 在某些浏览器中可能不准，推荐用 getBoundingClientRect）
const scrollTop = $(window).scrollTop();
const menuRect = menu[0].getBoundingClientRect();
const menuViewportTop = menuRect.top + scrollTop; // 更可靠的视口内Y坐标
// 检查是否覆盖任意 white_div
let isOnWhite = false;
$('.white_div').each(function() {
const $div = $(this);
const divTop = $div.offset().top;
const divBottom = divTop + $div.outerHeight(true);
if (menuViewportTop >= divTop && menuViewportTop <= divBottom) {
isOnWhite = true;
return false; // 退出循环
}
});
if (isOnWhite) {
menu.addClass('menu_black').removeClass('menu_white');
} else {
menu.addClass('menu_white').removeClass('menu_black');
}
}
// 初始调用 + 滚动监听
updateMenuColor();
$(window).on('scroll', updateMenuColor);
});✅ CSS 样式支持（保持不变）
.menu-item {
position: fixed;
top: 20px;
left: 20px;
text-decoration: none;
font-weight: bold;
z-index: 1000;
}
.menu_white { color: #fff; }
.menu_black { color: #000; }
.dark_div {
background: #000;
height: 150px;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
}
.white_div {
background: #fff;
height: 150px;
display: flex;
justify-content: center;
align-items: center;
color: #000;
}⚠️ 注意事项与优化建议
- offset().top 对 fixed 元素不准确：因 position: fixed 元素脱离文档流，其 offset() 返回值可能不符合预期。推荐改用 getBoundingClientRect().top + scrollTop 计算其在文档中的绝对 Y 坐标。
- 性能优化：滚动事件高频触发，务必使用防抖（debounce）或节流（throttle），或利用 requestAnimationFrame 批量更新；本例中 updateMenuColor 已剥离为独立函数便于控制。
- 扩展性：若需支持更多背景类型（如灰色、渐变），可将判断逻辑抽象为 getBackgroundClassAtPosition(y) 函数，返回对应 class 名。
- 无障碍与 SEO：确保颜色对比度符合 WCAG 2.1 AA 标准（文本与背景对比度 ≥ 4.5:1），避免纯依赖 JS 切换导致首屏不可读。
通过上述改进，导航链接将精准响应任意数量、任意顺序排列的明暗背景区块，真正实现“所见即所得”的视觉自适应效果。
