如何适配所有屏幕尺寸，滚动过全屏背景div后触发jQuery菜单样式切换

核心思路 #

将硬编码的滚动阈值替换为动态获取的#fullimg元素实际高度，同时监听窗口尺寸变化实时更新阈值，适配所有屏幕场景。

基础实现代码 #

// 初始化获取全屏背景元素的实际高度
let fullImgHeight = jQuery('#fullimg').outerHeight();

// 滚动监听逻辑
jQuery(window).scroll(function(){
    if (jQuery(this).scrollTop() > fullImgHeight) {
        jQuery('.mymenu').addClass('menu-invert');
    } else {
        jQuery('.mymenu').removeClass('menu-invert');
    }
});

// 监听窗口尺寸变化，更新高度阈值
jQuery(window).resize(function(){
    fullImgHeight = jQuery('#fullimg').outerHeight();
});

注意事项 #

• 使用outerHeight()可以获取元素的实际渲染高度，包含padding和border，若需要包含margin可改为outerHeight(true)，可根据自身布局调整。
• 新增的resize监听会在窗口缩放、移动端横竖屏切换时自动重新计算高度，保证阈值始终正确。

性能优化版本（可选） #

滚动和resize事件触发频率极高，添加节流逻辑可减少不必要的DOM操作，提升页面流畅度：

// 节流函数，默认100ms触发一次，可自行调整间隔
function throttle(func, delay = 100) {
    let timer = null;
    return function(...args) {
        if (timer) return;
        timer = setTimeout(() => {
            func.apply(this, args);
            timer = null;
        }, delay);
    }
}

let fullImgHeight = jQuery('#fullimg').outerHeight();

// 滚动逻辑添加节流
jQuery(window).scroll(throttle(function(){
    jQuery(this).scrollTop() > fullImgHeight 
        ? jQuery('.mymenu').addClass('menu-invert')
        : jQuery('.mymenu').removeClass('menu-invert');
}));

// resize逻辑添加节流
jQuery(window).resize(throttle(function(){
    fullImgHeight = jQuery('#fullimg').outerHeight();
}));

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