javascript - 多窗口事件 - Jquery

Question

我正在尝试编写一个函数来监 window 口中的一些事情:

1. 如果窗口大于 900px 并且窗口滚动超过 100 向导航添加 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

您的代码运行良好，如果您缓慢调整窗口大小，它甚至可以应用具有第二种背景颜色的第二类。唯一的问题是这个 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 分配类，这是因为没有在 else 中添加类调整大小功能。把它改成这个也能做到这一点:)

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