パララックスのお勉強
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); }
コメント