多個窗口事件-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');
       }
  }