本文介绍一种基于 jQuery 的解决方案，通过检测导航栏当前覆盖的页面区域背景类（如 .white_div 或 .dark_div），实时切换导航链接文字颜色，确保在明/暗背景上始终具备良好可读性。
本文介绍一种基于 jquery 的解决方案，通过检测导航栏当前覆盖的页面区域背景类（如 `.white_div` 或 `.dark_div`），实时切换导航链接文字颜色，确保在明/暗背景上始终具备良好可读性。
实现固定导航栏（position: fixed）的智能配色，核心在于判断导航栏垂直位置与各背景区块的重叠关系，而非简单依赖单个元素的位置或高度。原始代码仅检测首个 .white_div 的位置和高度，无法适配多个、非连续或高度不一的背景区块，导致逻辑失效。
✅ 正确思路：逐区块检测可见性
更鲁棒的方式是遍历所有具有明确背景语义的区块（如 .white_div 和 .dark_div），计算其可视范围（top 与 top + height），再判断固定导航栏的 offset().top 是否落入该范围内：
$(document).ready(function() {
function updateMenuColor() {
const menu = $('.menu-item');
const menuTop = menu.offset().top;
const scrollTop = $(window).scrollTop();
const viewportHeight = $(window).height();
// 导航栏实际可视 Y 坐标（考虑滚动偏移）
const navY = menuTop - scrollTop;
let shouldBeBlack = false;
// 遍历所有 white_div，检查导航是否正覆盖其可视区域
$('.white_div').each(function() {
const $div = $(this);
const divTop = $div.offset().top - scrollTop;
const divBottom = divTop + $div.outerHeight(true);
// 若导航栏中点（navY + 10）落在该 white_div 的可视区域内，则启用黑色文字
if (navY + 10 >= divTop && navY + 10 <h3>? CSS 配套（保持简洁）</h3><pre class="brush:php;toolbar:false;">.menu-item {
position: fixed;
top: 20px;
left: 50%;
transform: translateX(-50%);
text-decoration: none;
font-weight: 600;
z-index: 1000;
}
.menu_white { color: #fff; }
.menu_black { color: #000; }
/* 示例区块样式（需确保高度明确且无 margin collapse） */
.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;
}⚠️ 注意事项与优化建议
- 性能优化：使用 throttle（节流）避免高频 scroll 触发（推荐 Lodash 的 _.throttle 或原生 requestAnimationFrame 包装）；
- 多背景类型扩展：若存在 .gray_div、.blue_div 等，可将判断逻辑抽象为映射表（如 { '.white_div': 'black', '.dark_div': 'white' }），提升可维护性；
- 响应式兼容：resize 事件需重新计算，因窗口缩放可能改变元素布局；
- 无障碍增强：颜色切换时建议同步更新 aria-label 或 data-theme 属性，便于屏幕阅读器识别当前主题状态；
- 现代替代方案：在支持 Intersection Observer 的环境中，推荐使用 IntersectionObserver 替代手动计算，代码更简洁、性能更优。
该方案不再依赖“所有同类区块高度一致”的假设，而是真实反映导航栏当前所处的视觉上下文，真正实现“随背景而变”的智能配色体验。
