Tweet

Pocket

最近では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>

参考サイト

• サイドメニューが下まで行ったらそこで固定するJS（jQuery）