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

P N R A

東京都中野区に所在を構えるウェブ制作会社PNRA DESIGN OFFICE

jQuery基礎講座:スクロール量に応じて出現するナビゲーションエリア(ZIP付)

scroll-down

jQuery基礎講座[第5回]

どーも@PNRAです!
忘備録もかねて随時更新していくjQuery基礎講座の時間がやって参りました。

前回のjQuery基礎講座:ハンバーガーナビゲーション実装サンプル(ZIP付)に引き続き、今回もナビゲーション周りをいじくっていきたいと思います。

本日実装してみるのはタイトルの通り、スクロール量に応じて出現するナビゲーションエリアです。これは、スクロール量をjQueryで取得し、一定の深さまでスクロールするとコンテンツを表示させるというやつです。
ナビゲーション以外にも「ページトップへ戻る」ボタンの出現などにもよく使われるものなので、是非覚えておきましょう。

それでは、具体的にみていきましょう。

実装実例

jQuery関係はみてもらうのが一番早いと思うので、下記のウィンドウ内をスクロールしてみてください。

ナビゲーションエリアが上からするっと現れてきましたね。

今回作成したデモ『Scroll down Navigation』のポイントは、

jQueryでスクロールの深さを取得する

これだけです。

実装内容

上記のHTML、CSS、JSは下記のようになっています。少し短縮した形で記載していきますが、ダウンロードファイルには全て記載されています。

HTML

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja" dir="ltr">
<head>
<meta charset="UTF-8">
<title>---</title>

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />

<!-- CSS -->
<link href="css/normalize.css" rel="stylesheet">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/demo.css" rel="stylesheet">

<!-- JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/demo.js"></script>
</head>

<!-- navigation_area -->
<nav>
<div class="container">
<p class="title">Scroll down Navigation</p>
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">WORK</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</div>
</nav>

<section>
<div class="container">
<!-- content_area -->
</div>
</section>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
</body>
</html>

CSS

//demo.css
@charset "UTF-8";

html { height:100%; font-size:62.5%; }
body {
position:relative;
margin-left:auto; margin-right:auto; width:auto; height:auto;
background:#00979d;
color:#fff;
font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
font-weight:100;
-webkit-text-size-adjust: 100%;
}
nav {
width:100%;
height:50px;
display: none;
background:#fff;
position:relative;
position:fixed;
top:0;
}
nav::after {
content:'';
display:block;
clear:both;
}
.title {
font-size:24px;
color:#666;
padding:8px 0;
float:left;
}
nav ul {
display:block;
font-size:18px;
color:#666;
padding:13px 0;
float:right;
}
nav ul li {
display:inline-block;
margin-left:10px;
}
h1 {
font-size:60px;
margin-top:50px;
font-weight:100;
}
.content {
font-size:32px;
}
p {
margin:0;
}

JS

//demo.js
$(function() {
$(window).scroll(function () {
var s = $(this).scrollTop(); //変数sにウィンドウのトップを取得
var m = 300; //変数mにスクロール量を指示
if(s > m) { //sがmを上回ると、出現させる
$("nav").slideDown('slow');
} else if(s < m) { //sがmを下回ると、消える
$("nav").slideUp('slow');
}
});
});

簡単に説明をしていくと、
$(window).scroll(function () { //スクロールすると処理を実行する
var s / var m で変数の定義。今回はそれぞれ「s」がウィンドウの最上部の位置、「m」がスクロール量
ifで条件を与えます。「s」が「m」より大きくなったら「nav」に、slideDown()を実行・表示、または「m」が「s」より大きくなったら「nav」に、slideUp()を実行・非表示となります。
今回はナビゲーションエリアのために使用したので「nav」としてありますが、こちらは任意でclassやidに変えても大丈夫です。

今回使ったjQueryのslideDown() / slideUp()は要素をスライドさせて表示・非表示させることができます。スクロールの速度を指示することもでき、'slow'、'normal'、'fast'の3段階、あるいは'1500'といった数字をいれることで速度を調整できます。(速度はミリ秒('1500'であれば1.5秒))

「ページトップへ戻る」ボタンであれば、slideDown() / slideUp()よりもfadeIn() / fadeOut()がよいと思います。使い方は上記と同じです。

上記サンプル内容をまとめたZIPファイルを用意したので、是非オリジナルにカスタマイズして使ってみて下さい。

ダウンロードはこちらから(本サイトへ移動します。)

ちょくちょく更新していきますので、是非こちらもご覧ください。

過去4回の記事はこちら
jQuery基礎講座[第1回]:任意のid属性を使ったクリックアクション
jQuery基礎講座[第2回]:ハンバーガーナビゲーションボタンを作ろう!
jQuery基礎講座[第3回]:ウィンドウサイズを取得してブラウザ100%のぴったりHeightを指定する!
jQuery基礎講座[第4回]:ハンバーガーナビゲーション実装サンプル(ZIP付)

Siyabonga ekufundeni kwakho.(訳:最後まで読んでくれてありがとう。 / 注:ズールー語)