Question

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

代码：

function test() {

var scroll = parseInt($('.sidebar').css('height'));

if (window.matchMedia('(min-width: 769px)').matches) {

    $(window).scroll(function() {
        if ( $(window).scrollTop() > scroll  ) {      
            $('.element').addClass('fixed');
        } else {
            $('.element').removeClass('fixed');
        }
    });
} } 

window.onload = function() { test(); }

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

我可以让整个页面在重新调整大小时重新加载，但这对用户来说很慢并且很烦人。

尝试设置功能并调整大小但不起作用。

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

尝试为if添加“else”（window.matchMedia（'（min-width：769px）'）。匹配）但它也不起作用。

有没有办法解决这个问题？

Answer 1

滚动事件添加了onload，而不是在resize-event上删除。所以事件功能仍然被触发。怎么样：

 $(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');
    }
});

如何重新渲染或刷新或让js代码适用于不同的分辨率？

1 个答案: