如何通过jQuery读取固定定位DIV下方元素背景色并切换Logo？

完全可以实现这个需求，核心思路是监听页面滚动，实时检测固定header正下方的DIV背景色，再据此切换Logo的图片地址。以下是具体实现代码和说明：

实现步骤与代码 #

假设你的Logo图片标签有ID site-logo，固定header的ID为 fixed-header，提前准备好两种颜色的Logo（比如深色版和浅色版）：

// 预设参数：默认Logo的灰色值、两种Logo的地址
const DEFAULT_LOGO_GRAY = '#888888';
const LIGHT_LOGO = '/assets/light-logo.png';
const DARK_LOGO = '/assets/dark-logo.png';

// 检测并切换Logo的核心函数
function toggleLogo() {
    // 获取header的位置和高度，计算其底部的Y坐标
    const headerBottom = $('#fixed-header').offset().top + $('#fixed-header').outerHeight();
    
    // 遍历内容区域的DIV，找到覆盖header底部位置的元素
    let targetDiv = null;
    $('.content-div').each(function() { // 建议给内容DIV加统一类名，优化性能
        const divTop = $(this).offset().top;
        const divBottom = divTop + $(this).outerHeight();
        if (divTop <= headerBottom && divBottom >= headerBottom) {
            targetDiv = $(this);
            return false; // 找到匹配元素后停止遍历
        }
    });

    if (targetDiv) {
        // 获取DIV背景色，转为十六进制格式以便对比
        const bgHex = rgbToHex(targetDiv.css('background-color'));
        // 对比背景色与默认Logo灰色，切换对应Logo
        $('#site-logo').attr('src', bgHex === DEFAULT_LOGO_GRAY.toUpperCase() ? LIGHT_LOGO : DARK_LOGO);
    } else {
        // 无匹配元素时，恢复默认深色Logo
        $('#site-logo').attr('src', DARK_LOGO);
    }
}

// 辅助函数：将RGB格式颜色转为十六进制
function rgbToHex(rgb) {
    if (rgb === 'transparent') return '#FFFFFF'; // 透明背景按白色处理，可按需调整
    const [r, g, b] = rgb.match(/\d+/g).map(Number);
    return `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1).toUpperCase()}`;
}

// 页面初始化时执行一次，再绑定滚动监听
$(function() {
    toggleLogo();
    $(window).on('scroll', toggleLogo);
});

关键说明 #

• 滚动监听：每次页面滚动时，都会重新计算header底部的位置，找到当前处于该位置的内容DIV
• 颜色转换：jQuery获取的背景色通常是RGB格式，需要转为十六进制才能和预设的灰色值准确匹配
• 性能优化：给内容区域的DIV添加统一类名（比如.content-div），避免遍历页面所有DIV，提升检测效率
• 边界处理：当header下方没有内容DIV时（比如页面顶部或底部），自动恢复默认Logo

内容的提问来源于stack exchange，提问作者dubbs