スクロールしたら変化するコードをmax-width:780px限定でできないか？

（*質問はコード内に記入しました）

<!DOCTYPE html>
<head>
<meata lang="ja">
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="design.css">
<script
  src="https://code.jquery.com/jquery-3.2.1.min.js"
  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous"></script>
</head>
<body>
<header>
	<div class="title">World pictures ^^ </div>
	<div class="navToggle">
		<div>
			<span></span>
			<span></span>
			<span></span>
		</div>	
	</div>	
	<ul>
		<li><a href="#">Home</a></li>
		<li><a href="#">What is it?</a></li>
		<li><a href="#">Contact</a></li>
		<li><a href="#">twitter</a></li>
	</ul>		
</header>


<script>
$('.navToggle').on('click',function(){
	$('header ul').toggleClass('showing');  
});

//この↓の関数が780px以上でも実行されてスクロールしたらulにtop:64px;が自動的についてしまいデザインが崩れるので、 max-width:780pxだけ実行したいが方法がわかりません。
$(function(){
	var header = $('header');
	$(window).scroll(function(){
		if($(window).scrollTop() > 50){
			header.addClass('header_scrolled');
			$('header ul').css("top","64px"); 
		}else{
			header.removeClass('header_scrolled');
			$('header ul').css("top","128px");
		}
	}) 
});
</script>	
</body>

body{
	padding:0;
	margin:0;
}
a{
	text-decoration: none;
}
header{
	position:fixed;
	top:0px;
	left:0px;
	width:100%;
	height:8em;
	background-color: #F5A9A9;
	-webkit-transition: all 0.4s;
	-ms-transition: all 0.4s;
	-moz-transition: all 0.4s;
	-o-transition: all 0.4s;
	transition: all 0.4s;
}
.title{
	font-size: 40px;
	color:white;
	font-family: arial black;
	position:absolute;
	left: 5%;
	top:0;
	bottom:0;
	margin:auto;
}
.navToggle{
	display:none;
	position:absolute;
	right:20px;
	top:0;
	bottom:0;
	margin:auto;
	width:30px;
	height:25px;
	cursor:pointer;
	border:solid 1px white;
	padding:5px 5px 0 5px;
    border-radius: 5px;
}
.navToggle div{
	position: relative; 
}
.navToggle span{
	display:block;
	width:100%;
	border-bottom:solid 3px white;
	margin-bottom:5px;
}
header ul{
	position:absolute;
	right:5%;
	top:0;
	bottom:0;
	margin:auto;
	display:table;
	-webkit-transition: max-height 0.4s;
	-ms-transition: max-height 0.4s;
	-moz-transition: max-height 0.4s;
	-o-transition: max-height 0.4s;
	transition: max-height 0.4s;
}
header ul li{
	border-right:solid white 0.5px;
	color:black;
	display:table-cell;
	padding-right:10px;
	padding-left: 10px;
	font-size: 15px;
	cursor:pointer;
}
header ul li a{
	color:black; 
}
.header_scrolled{
	height:4em;
}


@media screen and (max-width:780px){
	.navToggle{
		display:block;
	}
	.showing{  
		bottom:0;
        left:0;
        right:0;
        max-height:20em;
	}
	header ul{
		max-height: 0; 
		position:relative;
		top:128px;
		right:0px;
		display:block; 
		width:100%;
		padding:0;
		overflow: hidden; 
		background-color:rgba(0,0,0,0.8);
	}
	header ul li{
		box-sizing:border-box;
		width:100%; 
		padding:15px;
		display:block;
		text-align: center;
		border-bottom:solid 1px #777;
	}
    header ul li a {
		color:white;
	}	
}

行動規範の内容に同意します

回答1件

ベストアンサー

window.matchMedia で判別出来ます。

【[JS] window.matchMedia をつかって JavaScript のコードをレスポンシブに分ける方法｜ memocarilog】
https://memocarilog.info/jquery/6500

【window.matchMedia - Web API インターフェイス | MDN】
https://developer.mozilla.org/ja/docs/Web/API/Window/matchMedia

投稿2017/05/05 04:35

kei344

総合スコア69400

kazoogon

2017/05/05 08:16

780px以下でできましたが、ブラウザーを780px以上に戻すとtopの値が残ったままでデザインが崩れます。important使ってみましたがこれだと横幅関係なくいつもこの値になってしまうので。。。ちなみにコードはこれです if(window.matchMedia('(max-width:780px)').matches){ $(window).scroll(function(){ if($(window).scrollTop() > 50){ $('header ul').css("top","64px"); }else{ $('header ul').css("top","128px"); } }) }