多个窗口事件-jQuery

Question

我正在尝试编写一个监视窗口的功能：

1. 如果窗口大于900px并且滚动了窗口并通过了100 ，则向导航900px添加BG颜色
2. 如果nav滚动超过100 ，并且窗口大小调整为小于900px更改BG颜色导航。

我编写了两个应该可以解决问题的函数。 我的问题是我的功能一直正常工作，直到您滚动通过100并调整屏幕大小：它们不会将第二类使用第二种bg颜色。

下面的代码段。 谁能提供帮助？

 $(document).ready(function() { $(window).scroll(function() { var scroll = $(window).scrollTop(); var nav = $('nav'); if( scroll > 100 ) { nav.addClass('scrolled'); } else { nav.removeClass('scrolled'); } }); $(window).resize(function() { var mq = window.matchMedia('(min-width: 100px) and (max-width: 900px)'); if( mq.matches && $('nav').hasClass('scrolled')) { $('nav').removeClass('scrolled'); console.log("Working"); $('nav').addClass('scrolledTwo'); } else { console.log("Not working"); $('nav').removeClass('scrolledTwo'); } }); }); 

 * { padding: 0; margin: 0; } nav { height: 70px; width: 100%; border: 1px solid; transition: all .2s ease; background-color: transparent; position: fixed; top: 0; left: 0; z-index: 1000; } .nav-fixedWidth { height: inherit; width: 1000px; margin: 0 auto; border: 1px solid #ccc; } main { width: 100%; height: 2000px; border: 1px solid; background-color: #f1f1f1; } .scrolled { background-color: red; } .scrolledTwo { background-color: blue; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <nav> <div class="nav-fixedWidth"></div> </nav> <main></main> 

Answer 1

您的代码运行良好，如果您要缓慢调整窗口大小，甚至可以使用第二种bg颜色来应用第二类。 唯一的问题是此if( mq.matches && $('nav').hasClass('scrolled'))条件。 正如您提到的$('nav').hasClass('scrolled')因此第一次调整大小时将为true，然后

$('nav').removeClass('scrolled');
console.log("Working");
$('nav').addClass('scrolledTwo');

这会将scrolledTwo类应用于导航。 之后，当您进一步调整大小时，它将永远不会通过此if( mq.matches && $('nav').hasClass('scrolled'))条件，直到您将屏幕宽度调整为小于100px或大于900px并滚动，并且将始终转到其他位置，您将始终看到红色。 尝试将其删除

 $(document).ready(function() { $(window).scroll(function() { var scroll = $(window).scrollTop(); var nav = $('nav'); if( scroll > 100 ) { nav.addClass('scrolled'); } else { nav.removeClass('scrolled'); } }); $(window).resize(function() { var mq = window.matchMedia('(min-width: 100px) and (max-width: 900px)'); if( mq.matches ) { $('nav').removeClass('scrolled'); console.log("Working"); $('nav').addClass('scrolledTwo'); } else { console.log("Not working"); $('nav').removeClass('scrolledTwo'); } }); }); 

 * { padding: 0; margin: 0; } nav { height: 70px; width: 100%; border: 1px solid; transition: all .2s ease; background-color: transparent; position: fixed; top: 0; left: 0; z-index: 1000; } .nav-fixedWidth { height: inherit; width: 1000px; margin: 0 auto; border: 1px solid #ccc; } main { width: 100%; height: 2000px; border: 1px solid; background-color: #f1f1f1; } .scrolled { background-color: red; } .scrolledTwo { background-color: blue; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <nav> <div class="nav-fixedWidth"></div> </nav> <main></main> 

您代码中的另一个问题是，如果我在100至900之间滚动并调整屏幕宽度的大小，然后再次将其调整大小到此窗口之外，则没有分配给div的类，这是由于在resize函数的其他部分未添加任何类。 将其更改为此也可以实现该技巧:)

else {
        console.log("Not working");
        $('nav').removeClass('scrolledTwo');
        var scroll = $(window).scrollTop();
       if( scroll > 100 ) {
         $('nav').addClass('scrolled');
       }
  }