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你想要运行它，并且如果它＆＃你希望它被忽略39; s小于或等于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>

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

2 个答案: