【JQuery】サイドメニューがスクロールしてもサイドメニューの下で固定する
最近では1ページの内容を多くしページが縦に長いサイトが多くなってきまました。コンテンツ内容が多くサイドバーの方が短いとページを下までスクロールしてしまうとサイドバーが使いづらくなってしまいます。そこでJQueryによって、サイドメニューがスクロールしてもサイドメニューの下で固定する方法です。
HTML
<div id="wrapper"> <div id="mainArea> <aside id="leftArea"> <div id="side"> サイドメニュー内容 </div> </aside> <section id="rightArea"> メインコンテンツ </section> </div> </div>
CSS
#wrapper { width:1000px; margin:0 auto; } #mainArea { margin:0; } #leftArea { float:left; width:350px; margin:30px 0 0 0; position:relative; } #leftArea #side { width:350px; } #rightArea { float:right; width:650px; margin:30px 0 0 0; }
JQuery
<script> $(window).load(function () { //該当のセレクタなどを代入 var mainArea = $("#mainArea"); //メインコンテンツ var sideWrap = $("#leftArea"); //サイドバーの外枠 var sideArea = $("#side"); //サイドバー /*設定ここまで*/ var wd = $(window); //ウィンドウ自体 //メインとサイドの高さを比べる var mainH = mainArea.height(); var sideH = sideWrap.height(); if(sideH < mainH) { //メインの方が高ければ色々処理する //サイドバーの外枠をメインと同じ高さにしてrelaltiveに(#sideをポジションで上や下に固定するため) sideWrap.css({"height": mainH,"position": "relative"}); //サイドバーがウィンドウよりいくらはみ出してるか var sideOver = wd.height()-sideArea.height(); //固定を開始する位置 = サイドバーの座標+はみ出す距離 var starPoint = sideArea.offset().top + (-sideOver); //固定を解除する位置 = メインコンテンツの終点 var breakPoint = sideArea.offset().top + mainH; wd.scroll(function() { //スクロール中の処理 if(wd.height() < sideArea.height()){ //サイドメニューが画面より大きい場合 if(starPoint < wd.scrollTop() && wd.scrollTop() + wd.height() < breakPoint){ //固定範囲内 sideArea.css({"position": "fixed", "bottom": "60px"}); }else if(wd.scrollTop() + wd.height() >= breakPoint){ //固定解除位置を超えた時 sideArea.css({"position": "fixed", "bottom": "60px"}); } else { //その他、上に戻った時 sideArea.css("position", "static"); } }else{ //サイドメニューが画面より小さい場合 var sideBtm = wd.scrollTop() + sideArea.height(); //サイドメニューの終点 if(mainArea.offset().top < wd.scrollTop() && sideBtm < breakPoint){ //固定範囲内 sideArea.css({"position": "fixed", "top": "60px"}); }else if(sideBtm >= breakPoint){ //固定解除位置を超えた時 //サイドバー固定場所(bottom指定すると不具合が出るのでtopからの固定位置を算出する) var fixedSide = mainH - sideH; sideArea.css({"position": "absolute", "top": fixedSide}); } else { sideArea.css("position", "static"); } } }); } }); </script>
コメントを残す