多窗口活动 - Jquery的

Question

我想写手表窗口的几件事情的函数：

1. 如果窗口大于900px和滚动窗口通过100添加背景色导航
2. 如果nav滚动通过100和窗口被调整大小小于900px更改BG颜色导航。

我已经写了两个函数应该做的伎俩。我的问题是我的功能正常工作，直到你滚动传递100并调整屏幕大小：他们不会使用第二个bg颜色应用第二个类。

下面的代码片段。任何人都可以提供援助

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

* { 
 
\t padding: 0; 
 
\t margin: 0; 
 
} 
 

 
nav { 
 
\t height: 70px; 
 
\t width: 100%; 
 
\t border: 1px solid; 
 
\t transition: all .2s ease; 
 
\t background-color: transparent; 
 
\t position: fixed; 
 
\t top: 0; 
 
\t left: 0; 
 
\t z-index: 1000; 
 
} 
 

 
.nav-fixedWidth { 
 
\t height: inherit; 
 
\t width: 1000px; 
 
\t margin: 0 auto; 
 
\t border: 1px solid #ccc; 
 
} 
 

 
main { 
 
\t width: 100%; 
 
\t height: 2000px; 
 
\t border: 1px solid; 
 
\t background-color: #f1f1f1; 
 
} 
 

 

 

 
.scrolled { 
 
\t background-color: red; 
 
} 
 

 
.scrolledTwo { 
 
\t background-color: blue; 
 
}

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

 
<main></main>

Answer 1

您的代码工作正常，但即使在应用第二类与第二背景颜色，如果你会慢慢调整窗口的大小。唯一的问题是这个if(mq.matches && $('nav').hasClass('scrolled'))条件。正如你所提到的$('nav').hasClass('scrolled')所以第一次的时候你会调整它的大小将是真实的，然后

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

这将适用scrolledTwo类资产净值。之后，当你进一步调整大小时，它将永远不会通过这个if(mq.matches && $('nav').hasClass('scrolled'))的条件，直到你不将屏幕宽度调整为小于100px或大于900px并滚动，并且总是会转到其他地方，并且你将始终看到红色。尝试删除它

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

* { 
 
\t padding: 0; 
 
\t margin: 0; 
 
} 
 

 
nav { 
 
\t height: 70px; 
 
\t width: 100%; 
 
\t border: 1px solid; 
 
\t transition: all .2s ease; 
 
\t background-color: transparent; 
 
\t position: fixed; 
 
\t top: 0; 
 
\t left: 0; 
 
\t z-index: 1000; 
 
} 
 

 
.nav-fixedWidth { 
 
\t height: inherit; 
 
\t width: 1000px; 
 
\t margin: 0 auto; 
 
\t border: 1px solid #ccc; 
 
} 
 

 
main { 
 
\t width: 100%; 
 
\t height: 2000px; 
 
\t border: 1px solid; 
 
\t background-color: #f1f1f1; 
 
} 
 

 

 

 
.scrolled { 
 
\t background-color: red; 
 
} 
 

 
.scrolledTwo { 
 
\t background-color: blue; 
 
}

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

 
<main></main>

在你的代码的另一个问题是，如果我滚动和调整100之间的屏幕宽度900，然后它再次调整到该窗口，那么有没有指定的类到你的div，这是由于没有类添加其他的调整大小功能。改变这一点，将做到这一招也:)）

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