masomi79の日記

スクロールに合わせて位置が変わるレフトメニュー

—

by

パララックスのお勉強

page.html

<html>
<head>
<script src='http://code.jquery.com/jquery-1.9.1.min.js'></script>
<script src='js/scrollMenu.js'></script>
</head>
<body>
<div id="page_bg">
<div id="header">
</div>
<div id="wrapper">
<div id="side_menu">
メニューの内容
</div>
<div id="contents">
コンテンツ
</div>
</div>
<div id="footer">
</div>
</div>
</body>
</html>

scrollMenu.js

/* ページの高さを取得する */
var pageheight = $('#page_bg').height();
/* レフトメニューの高さを取得する */
var menuheight = $('#side_menu').height();
/* レフトメニューの上端の位置を取得する */
var vsidemenu = $('#side_menu').offset().top;
/* フッターの上端の位置を取得する */
var vfooter = $('#footer').offset().top;
$(window).scroll(function() {
/* スクロールの位置を取得する */
var value = $(this).scrollTop();
/* スクロール値がメニュー上端の値より小さいときはそのまま */
if (value < vsidemenu) {
$('#side_menu').css('position', 'static');
/* 大きくなったら画面の上端に固定　*/
}else if(vsidemenu < value) {
$('#side_menu').css('position', 'fixed');
$('#side_menu').css('top', 0);
}
/* フッターのところまで来たら重ならないように、スクロールに合わせて上へ移動 */
/* しきい値は(ページの高さ) - (メニューの高さ + フッターの上端)	 */
var shikii = pageheight - menuHeight - footerheight;
/* メニュー表示位置は(しきい値) - (メニューの高さ) */
var menutop = shikii - menuheight;
/* スクロール値がしきい値を超えたら、メニューの配置をrelativeにしてメニューの上端を固定する*/
if(value > shikii){
$('#side_menu').css('position', 'relative');
$('#side_menu').css('top', menutop);
}

コメント

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