媒体查询无法在js中工作

Question

＆＃13;

＆＃13;

var win = window;
var docElement = document.documentElement;
var logo = document.getElementById('topLine');
var myName = document.querySelector('.myLogo');
var listItems = document.getElementById('navi').getElementsByTagName('li');
var links = document.querySelectorAll('#link');
var navTable = document.getElementById('navi');
var pngIcon = document.getElementById('icon');

	win.onscroll = function() {

		var sTop = (this.pageYOffset || docElement.scrollTop) - (docElement.clientTop || 0);

		if(window.matchMedia("(max-width: 880px)").matches) {

			if(sTop > 0) {
		 		logo.style.backgroundColor = '#8b9dc3';
		 		logo.style.height = 70 + 'px';
		 		myName.style.fontSize = 40 + 'px';
		 		for(var i = 0; i < listItems.length; i++) {
		 			listItems[i].style.fontSize = 25 + 'px';
		 		}	
		 		navTable.style.top = 70 + 'px';
		 		navTable.style.backgroundColor = '#8b9dc3';
		 		pngIcon.style.top = 15 + 'px';
			} else {
		 		logo.style.backgroundColor = 'rgba(207, 212, 206, .4)';
		 		logo.style.height = 90 + 'px';
		 		myName.style.fontSize = 50 + 'px';
		 		for(var i = 0; i < listItems.length; i++) {
		 			listItems[i].style.fontSize = 30 + 'px';
		 		}
		 		navTable.style.top = 90 + 'px';
		 		navTable.style.backgroundColor = 'rgba(207, 212, 206, .4)';
		 		pngIcon.style.top = 24 + 'px';
			}
		} else {

			if(sTop > 0) {
		 		logo.style.backgroundColor = '#8b9dc3';
		 		logo.style.height = 70 + 'px';
		 		myName.style.fontSize = 40 + 'px';
		 		for(var i = 0; i < listItems.length; i++) {
		 			listItems[i].style.fontSize = 25 + 'px';
		 		}
			} else {
		 		logo.style.backgroundColor = 'rgba(207, 212, 206, .4)';
		 		logo.style.height = 90 + 'px';
		 		myName.style.fontSize = 50 + 'px';
		 		for(var i = 0; i < listItems.length; i++) {
		 			listItems[i].style.fontSize = 30 + 'px';
		 		}
			}
		}
	}

＆＃13;

@media(max-width: 880px) {
	#navi {
		display: none;
	}
	.navWrapper label[for="mygtukas"] {
		background: url(images/open.png);
		background-size: 100% 100%;
		display: block;
		width: 55px;
		height: 45px;
		cursor: pointer;
		position: absolute;
		right: 2%;
		top: 24px;
		filter: invert(85%);
		transition: all 0.5s;
	}
	.navWrapper input[type="checkbox"]:checked ~ #navi {
		display: block;
		user-select: none;
		position: absolute;
	}

＆＃13;

	<nav id="topLine">
		<div class="navWrapper" >
			<h1 class="myLogo"><span class="initial">E.</span><span class="name">Erlandas</span> Petronis</h1>
			<div class="shadow"></div>
			<label for="mygtukas" id="icon"></label>
			<input type="checkbox" id="mygtukas">
			<ul id="navi" class="hide">
				<li id="li"><a id="link" class="active" href="#home">Home</a></li>
				<li id="li"><a id="link" href="#about">About</a></li>
				<li id="li"><a id="link" href="#portfolio">Portfolio</a></li>
				<li id="li"><a id="link" href="#contact">Contact</a></li>
			</ul>
		</div>
	</nav>

＆＃13;

＆＃13;

＆＃13;

我想要做的是，在某些屏幕尺寸上触发一个js样式而另一个触发其他，但似乎媒体查询被忽略，我得到双倍背景 - 第二个来自下拉菜单{{{ 1}}在css中。

它看起来如何：当屏幕是全尺寸时，我无法摆脱导航栏顶部的背景。

最终结果在全屏显示当你滚动它改变导航栏的样式时，它工作得很好，只是我在全屏时在我的背景上得到那种颜色，并且当屏幕小于880px时它比改变为下拉菜单并再次更改滚动样式。 提前谢谢你，希望我提供足够的信息。