グローバルナビをスクロール時に固定するとグローバルナビが右によってしまう

ブラウザをスクロールしてもナビゲーションが上部に固定される仕組みを作っています。
スクロールしても上部に固定されるようにはなったのですが、
ブラウザの中央に表示されているナビゲーションがスクロールすると右によってしまいます。
解決方法はありますでしょうか？

「ｈｔｍｌ」

<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/top_style.css">
<script src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
jQuery(function($) {
	var nav = $('#menu'),
	offset = nav.offset();
	$(window).scroll(function () {
	  if($(window).scrollTop() > offset.top) {
	    nav.addClass('fixed');
	  } else {
	    nav.removeClass('fixed');
	  }
	});
});
</script>
<meta charset="UTF-8">
<title>無題ドキュメント</title>
</head>

<body>

<header>
<nav id="menu" class="clearfix">

  <ul>
  	<li><h1><a href="index.html"><span>株式会社DPRK</span></a></h1></li>
    <li class="menu01"><a href="#">ホーム<br><span>HOME</span></a></li>
    <li class="menu02"><a href="#">会社概要<br><span>COMOPANY</span></a></li>
    <li class="menu03"><a href="#">事業内容<br><span>WORKS</span></a></li>
    <li class="menu04"><a href="#">ニュース<br><span>NEWS</span></a></li>
    <li class="menu05"><a href="#">採用情報<br><span>RECRUIT</span></a></li>
    <li class="menu06"><a href="#">お問い合わせ<br><span>CONTACT</span></a></li>
  </ul>
</nav>
</header>
</body>
</html>

「CSS」

* {
	margin:0 auto;
	padding:0;
}

html {
	height: 100%;
}

body {
	width:100%;
	color:#333;
	height:10000px;
}
a:hover {
	opacity: 0.7;
	filter: alpha(opacity=70);
	-ms-filter: "alpha(opacity=70)";
}

header {
	width:100%;
	padding-top:20px;
	float:left;
	text-align: center;
}

h1 {
  	width:210px;
  	height:60px;
  	background-image:url("../img/logo.png");
  	background-repeat:no-repeat;
	margin-right:20px;
	
}

h1 span {
	display:none;
}

h1 a {
	display:block;
  	width:210px;
  	height:60x;
}


nav {
	height:82px;
	display: inline-block;
}
nav li {
	list-style:none;
	float:left;
	text-align:center;
	padding-top:10px;
}

.fixed {
   position: fixed;
   top: 0;
   width: 100%;
   margin-top:20px;
  }

nav .menu01, .menu02, .menu03, .menu04, .menu05, .menu06 {
	width:125px;
	background-color:#FFF;
	font-weight:bold;
}

nav .menu02, .menu03, .menu04, .menu05, .menu06 {
	border-left: solid 1px #CCC;
	-moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   -o-box-sizing: border-box;
   -ms-box-sizing: border-box;
   box-sizing: border-box;
   
}

nav a {
	width:100%;
	display:block;
}

nav span {
	
	color:#CCC;
	font-weight:100;
	line-height:3em;
}

nav a:link { color: #333; }
nav a:visited { color: #333; }
nav a:hover { color: #333; }
nav a:active { color: #333; }

a {
	text-decoration:none;
}

.clearfix {
 *zoom: 1;
}
.clearfix:after {
	content: '';
	display: table;
	clear: both;
}

「起きる現象」

「スクロール前」

「スクロール後」

「試したこと」
CCSのfixedの部分を

.fixed {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 10000;
}

としてみたが解決しなかった。

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

回答1件

ベストアンサー

こうとか。

CSS
1.fixed {
2   position: fixed;
3   top: 0;
4   left: 0;
5   right: 0;
6   /*width: 100%;*/
7   margin-top:20px;
8}

投稿2018/03/03 03:41

kei344

総合スコア69398

退会済みユーザー

2018/03/03 03:55

ありがとうございます。試してみましたが今度は左によってしまいました。私も色々試してみます。

退会済みユーザー

2018/03/03 04:06

ナビゲーションに変なmarginがあったのが原因でした。そこを修正したらkei344さんの方法のままでうまくいきました。ありがとうございます。

退会済みユーザー

2018/03/03 06:37 編集

すいません。margin消したらうまくいったと思ったのですが、原因はwidth:100%でした。そこをwidth1000pxにしたら直ったのですが、実はその後box-shadowを追加したのですが横幅一杯にシャドウを付けたかったのにwidth1000pxのせいでそうはならず。width100%に戻すと横幅いっぱいにシャドウが付くのですがナビゲーションがまた端っこに移動してしまうという現象が起きてしまって、また原因が分からなくなってしまい他の方の意見なども聞きたく1度ベストアンサーはずさせて頂きました。kei344さんの回答が間違っているからとかではないのでご了承ください。自分の勘違いが原因でした。申し訳ありません。自分でも鋭意原因を調査中です。