如何根据810px视口阈值动态增删rellax类并解决Rellax元素不存在报错

• 控制台报错rellax.js:141 Rellax: The elements you're trying to select don't exist的直接触发逻辑：DOM就绪阶段执行new Rellax('.rellax')时，页面上无任何带.rellax类的元素——初始HTML中的.home-content默认未加该类，Rellax抓取不到有效匹配节点，触发内置的空选择器校验报错。
• 原有代码的时序逻辑错误：当前执行顺序为「先初始化Rellax实例」→「再判断窗口宽度决定是否给元素加.rellax类」，但Rellax实例仅会在初始化瞬间抓取匹配选择器的元素，后续动态新增的类不会被自动纳入实例管控范围；同时代码完全遗漏了需求要求的data-rellax-speed="-4"属性配置。

调整执行时序，在初始化Rellax前先完成目标元素的类名、属性的条件配置，确认存在有效视差元素后再创建Rellax实例；窗口尺寸变化时做双向状态同步，避免残留状态导致布局异常。

修正后可直接运行的代码：

$(document).ready(function(){
    let rellaxInstance = null;
    function syncParallaxConfig() {
        // 销毁旧实例，避免内存泄漏和无效计算
        if (rellaxInstance) {
            rellaxInstance.destroy();
            rellaxInstance = null;
        }
        const $homeContent = $('.home-content');
        if (window.innerWidth >= 810) {
            // 宽屏：添加rellax类，配置要求的视差速度
            $homeContent.addClass('rellax').attr('data-rellax-speed', '-4');
            // 确认存在匹配元素后再初始化，从根源避免空选择器报错
            if ($('.rellax').length > 0) {
                rellaxInstance = new Rellax('.rellax');
            }
        } else {
            // 窄屏：清除所有视差相关配置
            $homeContent.removeClass('rellax').removeAttr('data-rellax-speed');
        }
    }
    // 首次DOM加载完成时执行配置同步
    syncParallaxConfig();
    // 监听窗口尺寸变化，自动同步配置
    $(window).resize(syncParallaxConfig);
});

方案匹配的效果：

• 彻底消除控制台空元素选择报错：仅当页面存在带.rellax类的有效元素时，才会执行Rellax初始化
• 完全匹配需求规则：屏幕宽度大于810px时，自动为.home-content添加rellax类、设置data-rellax-speed="-4"的视差速度参数；屏幕宽度小于810px时，自动移除所有视差相关的类和属性
• 避免状态残留：窗口尺寸切换时会销毁旧的Rellax实例，不会出现视差计算残留导致的布局偏移、性能浪费问题

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