2016／06／13

JQuery

スクロールしても長さによって上下に固定されるサイドバーの設定方法

LINE

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

DEMO メインエリアよりサイドバーの方が短くサイドバーがウィンドウの高さより長い
DEMO メインエリアよりサイドバーの方が短くサイドバーがウィンドウの高さより短い

Contents

使用方法
準備するファイル
外部ファイルの読み込み
JavaScript
HTML
CSS
その他

使用方法

準備するファイル

・jquery.js

外部ファイルの読み込み

head内へ以下を追加します。

<!-- js -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

1 2	<!-- js --> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

JavaScript

JSは外部ファイル読込、htmlに記述、どちらでもいいですが、外部から読み込むのがよいでしょう。

$(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");
				}
			}
				
		
		});
	
	} 

});

$(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」要素を入れその中にコンテンツを記述する。

<div class="content">

  <div class="main">
    メインコンテンツ
  </div>
 
  <div id="sideWrap">
    <div id="side">
      サイドコンテンツ
    </div>
  </div>
 
</div>

メインコンテンツ

</div>

サイドコンテンツ

</div>

CSS

コンテンツの幅、高さは好みで設定してください。

    #main {
        width: 任意の値;
        float: left;
    }
    
    #sideWrap {
        width: 任意の値;
        float: right;
    }
    
    #side {
        width: 任意の値;
    }