こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

Jqueryでナビゲーションを固定したい

下記のソースで、スクロールするとナビゲーションが#menuの部分が上部に固定されるようにしたいのですがうまくいきません。

どこが間違っているのか教えて頂けると幸いです。

参考にしたサイトは
http://sou-getsu.com/archives/75
こちらでこちらのソースを使うとうまく行ってくれます。

<!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">
var bt = $("#menu").offset().top; // boxのページ上からの距離を取得
var ds = 0;

$(document).scroll(function(){ // スクロール発生時の処理の記述を開始
ds = $(this).scrollTop(); // ユーザのスクロールした距離を取得

if (bt <= ds) { // スクロール距離がboxの位置を超えたら、
$("#menu").addClass('fixed'); // 「follow」というclassを追加する
} else if (bt >= ds) { // スクロールがページ上まで戻ったら、
$("#menu").removeClass('fixed'); // classを削除
}
});
</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>

* {
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;
left: 0;
}

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;
}

投稿日時 - 2018-03-03 01:32:03

QNo.9434538

すぐに回答ほしいです

質問者が選んだベストアンサー

<script type="text/javascript">
var bt = $("#menu").offset().top; // boxのページ上からの距離を取得
のあいだに
$(function(){
が必要です。

そして
});
</script>
のあいだに
});
も必要です。

ナビゲーションの固定には、jQueryプラグインを導入してみてもいいでしょうね。
http://bl6.jp/web/javascript/jquery-sticky/

あとこの問題とは関係ありませんが、
<meta charset="UTF-8">
は<head>のすぐ下あたりに置いたほうがいいですよ。
文字エンコーディングの宣言は、ファイル冒頭の1024 バイト以内に入れたほうがいいとコンソールに表示されました。

投稿日時 - 2018-03-03 21:42:32

お礼

ありがとうございます。うまくいきました。

投稿日時 - 2018-03-04 17:30:46

ANo.1

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(1)

あなたにオススメの質問