Javascript 如何重新渲染、刷新或使js代码在不同分辨率下正常工作？

我看到有类似的问题，但找不到我问题的正确答案

代码：

正如您所看到的，这段代码（滚动时添加和删除简单类）应该适用于大于769px（宽度）的分辨率，并且它可以工作-当在移动设备上以1024px宽度的分辨率1024x768进行测试时-工作正常，但问题是当您旋转设备时-现在宽度为768px，但“已修复”类再次添加并打断布局。你必须刷新整个页面，这样代码才能正常工作

我可以使整个页面重新加载调整大小，但这是缓慢的和恼人的用户

尝试设置函数并调整大小，但不起作用

$(window).resize(function() {
    clearTimeout(window.resizedFinished);
    window.resizedFinished = setTimeout(function(){
        test();
    }, 10);
}); 

尝试为if（window.matchMedia（“（最小宽度：769px）”）.matches添加“else”，但也不起作用

---

有办法解决这个问题吗

滚动事件在加载时添加，在调整大小事件时不删除。因此，事件函数仍在被触发。那么：

 $(window).on('scroll resize', function() { // On both scroll and resize, call
    if (
        window.matchMedia('(min-width: 769px)').matches 
        && $(window).scrollTop() > scroll  
    ) {      
        $('.element').addClass('fixed');
    } else {
        $('.element').removeClass('fixed');
    }
});

 $(window).on('scroll resize', function() { // On both scroll and resize, call
    if (
        window.matchMedia('(min-width: 769px)').matches 
        && $(window).scrollTop() > scroll  
    ) {      
        $('.element').addClass('fixed');
    } else {
        $('.element').removeClass('fixed');
    }
});