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

求職者支援訓練webサイト制作科授業資料

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

Waypointsを使ったスクロールナビゲーション

Getting Started • Waypoints


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jQuery Waypoints</title>
<meta name="viewport" content="width=device-width">
<style>
html,body,h1,ul,li {
  margin:0;
  padding:0;
}
ul {
  list-style:none;
}
a {
  text-decoration:none;
  color:#FFFFFF;
}


header{
  background: #222; 
  color: #fff;
  width: 100%;
  text-align: center;
}

header h1 {
  padding: 40px 0;
}


nav {
  background:#666;
}
ul.gnav {
  width:600px;
  height:50px;
  overflow:hidden;
  margin:0 auto;
  background:#666;
}
ul.gnav li{
  width:120px;
  float: left;
}
ul.gnav li a {
  display:block;
  line-height:50px;
  border-left:1px solid #CCC;
}
ul.gnav li:last-child a {
   border-right:1px solid #CCC;
}
#content {
	height: 1500px;
	padding: 100px;
	text-align: center;
}
footer{
	height: 200px;
	background: #ddd;
}

/*スクロール後のスタイル*/
header.scroll{
  position: fixed;
  top:0;
  left: 0; 
  opacity: 0.85;
}
header.scroll h1{
  position: fixed;
  top:-28px;
  left:20px;
  font-size:16px;
  z-index:9999;
}
</style>


<!-- script -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="jquery.waypoints.js"></script>
<script>
$(function() {
$("#content").waypoint({
handler: function(direction) {//
	if (direction == 'down') { //スクロールが下方の場合下記実行
		$("header").addClass('scroll');
		$("header.scroll").hide().slideDown(300);
	}else { //スクロールが下方以外の場合下記実行
	
		$("header.scroll").slideUp(200,function(){
			$("header").removeClass('scroll').slideDown(300);
		});
	}

}
});
});
</script>

</head>
<body>
<div id="container">
<header>
<h1>jQuery Waypoints</h1>
<nav>
<ul class="gnav">
<li><a href="#">menu</a></li>
<li><a href="#">menu</a></li>
<li><a href="#">menu</a></li>
<li><a href="#">menu</a></li>
<li><a href="#">menu</a></li>
</ul>
</nav>
</header>
<div id="content">
<p>コンテンツエリア</p>
</div>
<footer>
<p>フッターエリア</p>
</footer>
</div>
</body>
</html>