スクロールしてもついてくるサイドメニューをjQueryとCSSで作るチュートリアル

スクロールしてもついてくるサイドメニューをjQueryとCSSで作るチュートリアル

jQueryを使って短いコードで実装できる、スクロールしてもサイドにアニメーションをつけて固定するサイドメニューのチュートリアルが公開されていましたので、参考にサンプルを作ってみました。

参考:公開されているデモのファイルもダウンロードできます。
Creating a Floating HTML Menu Using jQuery and CSS – Tuts+ Code Tutorial

Creating a Floating HTML Menu Using jQuery and CSS

特定要素内だけついてくるようにできるチュートリアルも書きました→[jQuery] 特定の要素内だけスクロールに追随するサイドバーを作る方法 | memocarilog

作り方

細かいコードはチュートリアルページにありますのでご参照下さい。
ついてくるようにしたいサイドのdivに対してposition:absoluteで配置します。ヘッド内でjQueryを読み込みます。続けて下記のコードを記入します。

***追記***
11行目の変数offsetの中身を、menuYloc+$(document).scrollTop()+”px”
にしていましたがブラウザにより座標を取得できない可能性があった為、
menuYloc+$(window).scrollTop()+”px” に変更しました。

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
	var name = "#floatMenu";
	var menuYloc = null;
	
		$(document).ready(function(){
			menuYloc = parseInt($(name).css("top").substring(0,$(name).css("top").indexOf("px")))
			$(window).scroll(function () { 
				offset = menuYloc+$(window).scrollTop()+"px";
				$(name).animate({top:offset},{duration:500,queue:false});
			});
		}); 
</script>

var name = “#floatMenu”の部分には固定したいサイドの要素を指定します。
“duration:900″でサイドメニューが降りてくるスピードを変更できます。

作ったサンプルデモ

使ってみたdemoです。

シンプルにアニメーションをつけて固定できるので使いやすいですね。
使ってみたdemoのフローティング部分のhtmlとcssは下記です。

ヘッドとbody

<link href="style.css" rel="stylesheet" type="text/css" media="all" />
<script type="text/javascript" src="jquery-1.7.min.js"></script>
<script type="text/javascript">
	var name = "#floatMenu";
	var menuYloc = null;
	
		$(document).ready(function(){
			menuYloc = parseInt($(name).css("top").substring(0,$(name).css("top").indexOf("px")))
			$(window).scroll(function () { 
				offset = menuYloc+$(window).scrollTop()+"px";
				$(name).animate({top:offset},{duration:900,queue:false});
			});
		}); 
	 </script>
</head>
<body>
<div id="example">
<div id="main">
<h1><img src="memocarilogdemo.png" /></h1>
<h2>Floating Box</h2>
(略。文章の部分です。)
</div>
<div id="floatMenu">
<p>Sidemenu</p>
<p>Creating a Floating<br /> HTML Menu Using<br /> jQuery and CSS</p>
<p><a href="https://memocarilog.info/jquery/3047">元のページへ</a></p>
</div>

CSS

#floatMenu{
	width: 210px;
	height: 300px;
	background-color:olive;
	position: absolute;
	top:100px;
	left: : 10px;
	padding: 20px;
}

Related Article

1 Comments & Tracbacks

Leave a Comment

Emailは公開されません。*は必須項目です。


*


Categorys

Tags

CSS3 ダッシュボード ヘッダー トラブル コードサンプル スライドショー コンテンツ 素材 jQueryプラグイン Facebook php 引っ越し お知らせ JavaScript CSS カテゴリー Shareボタン IE 投稿タイプ seo Photoshop HTML5 レスポンシブ サイドバー ナビゲーション タクソノミー WPセキュリティ Git カスタムメニュー Macアプリ PHPリファレンス SVG query_posts API WP使い方 iTunes データベース コメント function RSS 条件分岐 get_posts() スマートフォン Sass/Compass マルチサイト機能