スクロールしてもついてくるサイドメニューをjQueryとCSSで作るチュートリアル
jQueryを使って短いコードで実装できる、スクロールしてもサイドにアニメーションをつけて固定するサイドメニューのチュートリアルが公開されていましたので、参考にサンプルを作ってみました。
参考：公開されているデモのファイルもダウンロードできます。
Creating a Floating HTML Menu Using jQuery and CSS – Tuts+ Code Tutorial
Creating a Floating HTML Menu Using jQuery and CSS – Tuts+ Code Tutorial
特定要素内だけついてくるようにできるチュートリアルも書きました→[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;
}
1 Comments & Tracbacks