WordPress站点jQuery滚动事件Chrome正常Safari失效求助

问题情况 #

接手的WordPress站点，头部菜单依赖jQuery滚动事件实现样式切换：

• 滚动距离超过100px时，给指定元素添加类以应用新样式
• 滚动距离≤100px时移除对应类

该功能在Chrome中正常运行，但Safari完全无效——滚动事件未触发，类未添加。Safari控制台报错：

Failed to load resource: You do not have permission to access the requested resource

相关代码 #

// Header menu tricks
jQuery(document).ready(function () {
jQuery(window).scroll(function () {
if (jQuery(this).scrollTop() > 100) {
jQuery('.header-area, .homepage-popup, #desktop-mini-cart').addClass('tight departed');
} else {
jQuery('.header-area, .homepage-popup, #desktop-mini-cart').removeClass('tight');
}
});
});

jQuery(document).ready(function () {
jQuery(window).scroll(function () {
if (jQuery(this).scrollTop() > 100) {
jQuery('.menu-display-area').addClass('tight');
} else {
jQuery('.menu-display-area').removeClass('tight');
}
});
});

排查方向 #

1. 资源加载权限问题：控制台的权限报错是核心线索，大概率是站点内某类资源（如jQuery文件、样式表）被Safari的安全策略拦截，导致jQuery未正常加载，滚动事件无法执行。常见原因包括混合内容（HTTPS站点加载HTTP协议资源）、CORS配置错误、资源路径权限限制。
2. jQuery兼容性问题：旧版jQuery可能存在Safari特定的scroll事件监听bug，或者jQuery未正确初始化。
3. 重复监听冗余：代码中存在两个独立的document.ready和scroll监听，虽不直接导致失效，但可能增加潜在冲突风险。

解决办法 #

1. 修复资源加载权限问题 #

• 检查站点所有静态资源（JS、CSS、图片）的URL，确保全部采用HTTPS协议（站点本身是HTTPS，Safari会拦截HTTP资源）。
• 用WordPress内置函数wp_enqueue_script加载jQuery，避免直接硬编码外部链接，确保路径和权限正确。
• 检查服务器的CORS配置，确保允许当前域名访问所有加载的资源。

2. 优化并简化jQuery代码 #

合并重复的滚动事件监听，使用更简洁的toggleClass语法提升代码可读性与兼容性：

jQuery(document).ready(function ($) {
    $(window).scroll(function () {
        const isScrolled = $(this).scrollTop() > 100;
        
        // 处理头部区域元素
        $('.header-area, .homepage-popup, #desktop-mini-cart')
            .toggleClass('tight', !isScrolled)
            .toggleClass('departed', isScrolled);
        
        // 处理菜单显示区域
        $('.menu-display-area').toggleClass('tight', isScrolled);
    });
});

3. 用原生JS兜底测试 #

如果jQuery仍无法触发事件，可尝试原生JS实现逻辑，排除jQuery本身的问题：

document.addEventListener('DOMContentLoaded', function() {
    window.addEventListener('scroll', function() {
        const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
        const isScrolled = scrollTop > 100;
        
        // 处理第一组元素
        const targetElements = document.querySelectorAll('.header-area, .homepage-popup, #desktop-mini-cart');
        targetElements.forEach(el => {
            if (isScrolled) {
                el.classList.add('tight', 'departed');
            } else {
                el.classList.remove('tight');
            }
        });
        
        // 处理菜单区域
        const menuArea = document.querySelector('.menu-display-area');
        isScrolled ? menuArea.classList.add('tight') : menuArea.classList.remove('tight');
    });
});

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