2016/06/13
- JQuery
スクロールしても長さによって上下に固定されるサイドバーの設定方法
ページをスクロールするとサイドエリアが空白になってしまう場合、サイドバーが画面上部下部に固定されるコードです。この手のコードはたくさんありますがその中でも上部、下部両方に対応している秀逸なものがあったので紹介いたします。

使用方法
準備するファイル
・jquery.js
外部ファイルの読み込み
head内へ以下を追加します。
1 2 |
<!-- js --> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> |
JavaScript
JSは外部ファイル読込、htmlに記述、どちらでもいいですが、外部から読み込むのがよいでしょう。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 |
$(window).load(function () { var mainArea = $("#main"); var sideWrap = $("#sideWrap"); var sideArea = $("#side"); var wd = $(window); var mainH = mainArea.height(); var sideH = sideWrap.height(); if(sideH < mainH) { 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": "20px"}); }else if(wd.scrollTop() + wd.height() >= breakPoint){ sideArea.css({"position": "absolute", "bottom": "0"}); } 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": "20px"}); }else if(sideBtm >= breakPoint){ var fixedSide = mainH - sideH; sideArea.css({"position": "absolute", "top": fixedSide}); } else { sideArea.css("position", "static"); } } }); } }); |
HTML
「#main」にメインコンテンツ「#sideWrap」要素の中に「#side」要素 を入れその中にコンテンツを記述する。
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<div class="content"> <div class="main"> メインコンテンツ </div> <div id="sideWrap"> <div id="side"> サイドコンテンツ </div> </div> </div> |
CSS
コンテンツの幅、高さは好みで設定してください。
1 2 3 4 5 6 7 8 9 10 11 12 13 |
#main { width: 任意の値; float: left; } #sideWrap { width: 任意の値; float: right; } #side { width: 任意の値; } |
その他
今回はこちらのサイトに掲載されていた方法をご紹介しました。
参考サイト
サイドメニューが下まで行ったらそこで固定するJS(jQuery)
サイドバーには非常にアピールしたい情報を掲載していると思いますので、とても便利なコードだと思います。
コメントを残す