スクロールしても固定されるメニューが作れるjQueryプラグイン「stickUp」

jQueryプラグイン「stickUp」はページの上部にメニューを固定して表示させることができるjQueryプラグインです。

ワンページスクロールサイトのみならず、縦長にコンテンツがあるページにメニューを固定させて表示させておくというのは、最近よく使われる手法です。

サンプルを作ってみましたので、みてもらうとわかりやすいと思います。

⇒ スクロールしても固定されるメニューが作れるjQueryプラグイン「stickUp」サンプル

設置の仕方も簡単にできる便利なjQueryプラグインです。

導入方法

まずは、こちらのstickUpのGilyHubのサイトからファイルを一式ダウンロードします。

次のようなメニューを作ります。

<div class="navbar">
	 <div class="nav">
              <ul class="navbar-nav">
                <li class="menuItem active"><a href="#home">Home</a></li>
                <li class="menuItem"><a href="#features">特徴</a></li>
                <li class="menuItem"><a href="#news">おしらせ</a></li>
              </ul>
	</div>
</div>

</ul>

</div>

次にjQueryを読み込ませて、設定します。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="js/stickUp.js"></script>
<script>
jQuery(function($) {
	$(document).ready(function() {
	    $('.navbar').stickUp({ parts: { 0:'home', 1:'features', 2: 'news', 3: 'sample' }, itemClass: 'menuItem', itemHover: 'active' });
	});
});
</script>

jQuery(function($) {

$(document).ready(function() {

$('.navbar').stickUp({ parts: { 0:'home', 1:'features', 2: 'news', 3: 'sample' }, itemClass: 'menuItem', itemHover: 'active' });

});

</script>

※ 対応したメニューのリンクと同じ名前でそれぞれIDを付けます。
※※　メニューのクラス名とアクティブになってるときのクラス名を付けます。

最後に、CSSで外観を整えたら完成です。

サンプルのソースを記しておきます。どうぞご参考まで。（コンテンツは省略してあります。）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>スクロールしても固定されるメニューが作れるjQueryプラグイン「stickUp」／　ぱんにゃっと/H&Yチュートリアル</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="js/stickUp.js"></script>
<script>
jQuery(function($) {
	$(document).ready(function() {
	    $('.navbar').stickUp({ parts: { 0:'home', 1:'features', 2: 'news', 3: 'sample' }, itemClass: 'menuItem', itemHover: 'active' });
	});
});
</script>
<style>
* { padding:0;margin:0;}
.navbar{
background:#5CB85C;
color:#FFF;
width: 100%;
}
.nav{ height:50px;line-height: 50px}
ul { padding-left: 30px;}
li { list-style:none;float:left;padding:0 10px;margin-right: 10px}
li a { color:#FFF;text-decoration: none;}
li.active { background: #367436;}
</style>

</head>
<body>

<div class="navbar">
	 <div class="nav">
              <ul class="navbar-nav">
                <li class="menuItem active"><a href="#home">Home</a></li>
                <li class="menuItem"><a href="#features">特徴</a></li>
                <li class="menuItem"><a href="#news">おしらせ</a></li>
              </ul>
	</div>
</div>

<p style="padding:5px 50px;">A simple plugin that <i>"sticks"</i> an element to the top of the browser window while scrolling past it, always keeping it in view. </p>
<div id="home" style="padding:30px;">
<p style="padding:5px 50px 10px;50px;"><img src="images/image.jpg" width="100%" alt=""></p>
	<h3>ホーム</h3>
	 <p>A simple plugin that <i>"sticks"</i> an element to the top of the browser window while scrolling past it, always keeping it in view.  This plugin works on multi-page sites, but has additional features for one-pager layouts. Scroll down to see it in action.</p>
	</div>
	<div id="features" style="padding:30px;">
	<h3>特徴</h3>
	<p>スクロールしても固定されるメニューを実装することが出来ます。<br/>
	スクロールしてもページの上部にメニューが表示されるようになります。<br/>
	<br/>
	ワンページスクロールサイトを実装するのにも使えます。</p>
</div>
<div id="news" style="padding:30px;">
	<h3>おしらせ</h3>
	<p>人は文字ライセンスと対処認め必然でます以下、関係しれパブリックが引用者可能の参考裁判にしればは有するなけれ、同一の事典は、表現さ本質に侵害ならことにより著作重要なたてくださいないない。</p>
	<p>たとえば、商業の編集権は、プロジェクトの侵害従い参加重要ある記事と考慮疑わ、このプライバシーをありてプロジェクトと認定するものと著作よれれない。</p>
	<p>ただしを、編集下を該当しれるていコンテンツに決してさ加えことは、理解ますます、過去においては著作者の投稿について書籍上の問題は満たさことと、非著作性は、活発の引用がして文献に著作するんばいなます。推奨含むて、ここの例証も強くかもありませた。</p>
</div>
</body>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<head>

<title>スクロールしても固定されるメニューが作れるjQueryプラグイン「stickUp」／　ぱんにゃっと/H&Yチュートリアル</title>

jQuery(function($) {

$(document).ready(function() {

$('.navbar').stickUp({ parts: { 0:'home', 1:'features', 2: 'news', 3: 'sample' }, itemClass: 'menuItem', itemHover: 'active' });

});

</script>

<style>

* { padding:0;margin:0;}

.navbar{

background:#5CB85C;

color:#FFF;

width: 100%;

}

.nav{ height:50px;line-height: 50px}

ul { padding-left: 30px;}

li { list-style:none;float:left;padding:0 10px;margin-right: 10px}

li a { color:#FFF;text-decoration: none;}

li.active { background: #367436;}

</style>

</head>

<body>

</ul>

</div>

<p style="padding:5px 50px;">A simple plugin that <i>"sticks"</i> an element to the top of the browser window while scrolling past it, always keeping it in view. </p>

<p>A simple plugin that <i>"sticks"</i> an element to the top of the browser window while scrolling past it, always keeping it in view. This plugin works on multi-page sites, but has additional features for one-pager layouts. Scroll down to see it in action.</p>

</div>

<p>スクロールしても固定されるメニューを実装することが出来ます。<br/>

スクロールしてもページの上部にメニューが表示されるようになります。<br/>

<br/>

ワンページスクロールサイトを実装するのにも使えます。</p>

</div>

<p>人は文字ライセンスと対処認め必然でます以下、関係しれパブリックが引用者可能の参考裁判にしればは有するなけれ、同一の事典は、表現さ本質に侵害ならことにより著作重要なたてくださいないない。</p>

<p>たとえば、商業の編集権は、プロジェクトの侵害従い参加重要ある記事と考慮疑わ、このプライバシーをありてプロジェクトと認定するものと著作よれれない。</p>

<p>ただしを、編集下を該当しれるていコンテンツに決してさ加えことは、理解ますます、過去においては著作者の投稿について書籍上の問題は満たさことと、非著作性は、活発の引用がして文献に著作するんばいなます。推奨含むて、ここの例証も強くかもありませた。</p>

</div>

</body>

あわせてお読みください

超絶簡単にワンページスクロールサイトが作れるjQueryプラグイン『Smint』

SMINT メニューをクリックするとスルスルっと縦スクロールしていって、コンテンツの部分でとまるワンページスクロールのサイトを作りたい方にぴったりのjQuer…

にゅるっと出てくるスマホで便利なお洒落メニュー「Animated Border Menus 」

スマホやタブレットでメニューを表示させたいときに活用できるレスポンシブタイプのメニュー「Animated Border Menus 」を紹介します。メニューア…

メニューが飛び出すjQueryプラグイン「Pop Circle」

Pop Circle クリックすると円状にメニューが飛び出すアニメーションを実現できるのが、このjQueryプラグイン「Pop Circle」です。中央の円（…

ぱんにゃっとTutorial

jQueryやWordPress、Webデザインに役立つ情報など

ちょっと楽しいおすすめのサンプル

月額126円(税抜)から！WordPressも使えるクラウド型高速レンタルサーバー

カテゴリー

タグ

スクロールしても固定されるメニューが作れるjQueryプラグイン「stickUp」

⇒ スクロールしても固定されるメニューが作れるjQueryプラグイン「stickUp」サンプル

導入方法

あわせてお読みください

コメントを残すコメントをキャンセル

ぱんにゃっとTutorial

jQueryやWordPress、Webデザインに役立つ情報など

ちょっと楽しいおすすめのサンプル

人気記事ランキング

月額126円(税抜)から！WordPressも使えるクラウド型高速レンタルサーバー

カテゴリー

タグ

スクロールしても固定されるメニューが作れるjQueryプラグイン「stickUp」

⇒ スクロールしても固定されるメニューが作れるjQueryプラグイン「stickUp」サンプル

導入方法

あわせてお読みください

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル