読者です 読者をやめる 読者になる 読者になる

求職者支援訓練webサイト制作科1月クラス

フェリカテクニカルアカデミー池袋の求職者支援訓練webサイト制作科1月クラスの授業解説ブログです。

スクロールしたら、ナビゲーションを固定する

シングルページなどの縦長ページの場合、上下にスクロールする量がどうしても増えてしまいます。なのでユーザーがいつでも移動出来るように、常にナビゲーションを画面上部などに固定する必要があります。ただ固定するだけならposition:fixedで良いのですが、レイアウト上、ある程度スクロールしたら固定にしたいなどの場合は、jQueryのスクロールイベントの設定で必要になってきます。さらに移動の際には「スムーススクロール」の動きをつけてみましょう。

参考サイト

www.bloomingville.com


<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>固定なび</title>
<style>
/* reset */
html, body, div, h1, h2, h3, h4, h5, h6,p,ul, ol, li {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo, 
    sans-serif;
}
ul {
  list-style: none; /* マーカーを消す */
}
a {
  text-decoration: none; /* 下線を消す */
}
img {
  border: 0;
  vertical-align: bottom;
}

#container {
    background:#f0ede7;
    height: 3000px;
}
#header {
  width:100%;
  background:#e4dfd6;
}
h1 {
text-align: center;
font-size: 40px;
padding: 40px;
}
nav {
  width:100%;
  background: #DDD3C3;
  height:50px;
  position: absolute;
  bottom:0;
  left:0;
}
nav ul {
  width:960px;
  margin:0 auto;
  overflow: hidden;
}
nav li {
  float:left;
  width:20%;
  height: 50px;
}
nav li a {
  display: block;
  line-height: 50px;
  text-align:center;
  color:#222;
}
/*ナビゲーションのスクロール*/
nav.fixed {
  position:fixed;
  left:0;
  top:0;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script>
$(function() {
				$(window).scroll(function() {
					if ($(window).scrollTop() > 588) {
						$('nav').addClass('fixed');
					} else {
						$('nav').removeClass('fixed');
					}
          });
});

</script>
</head>

<body>
<div id="container">
<header>
<h1>Bloomingville</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Shop</a></li>
<li><a href="#">Collections</a></li>
<li><a href="#">Press</a></li>
<li><a href="#">About</a></li>
</ul>
</nav>
</header>
</div>
</body>
</html>