如何在断点处禁用JavaScript，如媒体查询

Question

我有受JavaScript影响的<header>和<nav>块。 如果窗口小于或等于1200px宽，如何创建与媒体查询等效的JavaScript以禁用所有此JavaScript代码？

我当前的JavaScript，没有停止运行的指令（ </html>之前的最后一件事）：

<script>
    $(window).scroll(function() {
        if ($(this).scrollTop()>119)
         {
            $('header').fadeOut();
            $('nav').css({position: 'fixed', top: '0px'});
         }
        else
         {
          $('header').fadeIn();
          $('nav').css({position: 'absolute', top: 'auto'});
         }
    });
</script>

我试过包装代码

if (document.documentElement.clientWidth <= 1200) {
    // scripts
}

和

if (screen.width <= 1200) {
    // scripts
}

没有运气。

Answer 1

包装代码是正确的方法。 由于你已经在使用jQuery，你可以这样做

if($(window).width() > 1200) {
  // the rest of your code goes here
}

请注意，我使用的是>而不是<= ，因为如果它大于1200px则要运行它，并且如果它小于或等于1200px，则希望忽略它。

Answer 2

在您的代码中尝试此操作：

<script>
    var windowWidth = $(window).width();

    if(windowWidth >= 1200)
    {
        $(window).scroll(function() {
            if ($(this).scrollTop()>119)
            {
                $('header').fadeOut();
                $('nav').css({position: 'fixed', top: '0px'});
            }
            else
            {
                $('header').fadeIn();
                $('nav').css({position: 'absolute', top: 'auto'});
            }
        });
    }
</script>