如何在斷點處禁用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>