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

powered by hm solution

お問い合わせ:0120-290-727
受付時間:10:00~18:00(土日祝は除く)

お問い合わせ

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

サイドバーを固定するJS
赤ちゃん夜泣きで困ったな~カン虫・乳吐き困ったな~・・・
ヒヤキオーガンって効くんかな?

サイドバーが最後までいったら、そこで止まってるパターンよく見ませんか?

最初に見たのはFACEBOOKかな?最近は採用しているサイトやブログを見かけます。

実装したいな~と思いつつ、よさげなコード探していたんですが、自分の要件ずっぽしのものが見つけられなかったので自作しました。

「前置きはいいからはよ出せいっ」て人のために、とりあえずデモとダウンロード・・・

サイドバーが長い場合のデモサイドバーが短い場合のデモ

ソースダウンロード ※2014.02.03 jsファイル一部修正しました。

動作検証:IE8~、各ブラウザ最新バージョン

こんな要件

  • ページによってサイドバーの長さが異なっても大丈夫。
  • メインのコンテンツより、サイドバーが短い場合に、サイドバーが最後まで行ったらそこで固定される。
  • 加えて、ウィンドウよりもサイドバーが短い場合は、下じゃなくて上に固定される。
※本来は任意の広告を固定表示して、機会損失を防ぐみたいな使い方が正しいと思いますが、今回はとりあえず「下まで行ったら固定する」というものです。

設置方法

ソースをダウンロードして、ゴニョゴニョしてください・・・
こんなのが必要なのは恐らく玄人さんだと思うので・・・
詳細は解説コメントを入れた「side-fixed-comment.js」をご確認ください。

ソースダウンロード ※2014.02.03 jsファイル一部修正しました。

一応ソースコード

html


<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="side-fixed.js"></script>

<div id="header">
<p>私はヘッダー。</p>
</div><!-- / #header -->

<div id="contents">

<div id="main">
<p>それがしがメインエリア。
※改行とかで適当に高さ調整してください。</p>
</div><!-- / #main -->

<div id="sideWrap">
<div id="side">
<p>我はサイドバー。
※改行とかで適当に高さ調整してください。</p>
</div><!-- / #side -->
</div><!-- / #sideWrap -->

</div><!-- / #contents -->

<div id="footer">
<p>ワタスはフッター。</p>
</div><!-- / #footer -->

css

body{text-align:center; margin:0; padding:0;}

.demoLink{margin:15px 0;}

p{font-weight:bold;font-size:20px; color:#fff; padding:10px; line-height:1.5; margin:0;}

#header{width:1000px; margin:0 auto 30px;background:#666; padding:30px 0;}

#contents{width:1000px; margin:0 auto 30px; overflow:hidden;}

#main{width:720px; float:left;background:#aaa;}

#sideWrap{width:260px; float:right;position:relative;border-bottom:2px solid red;}

#side{width:260px; background:#eee;}

#side p{color:#333;font-size:15px; border:1px solid #ccc;}

#footer{background:#444;padding:20px 0; height:600px;}

javascript

$(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) { //メインの方が高ければ色々処理する
		
		//サイドバーの外枠をメインと同じ高さにして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": "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){ //固定解除位置を超えた時
				
					//サイドバー固定場所(bottom指定すると不具合が出るのでtopからの固定位置を算出する)
					var fixedSide = mainH - sideH;
					
					sideArea.css({"position": "absolute", "top": fixedSide});
					
				} else {
					sideArea.css("position", "static");
				}
			}
				
		
		});
	
	} 

});

むむむ!と思った方

本スクリプトに関するお問い合わせ・ダメ出しは

@hidelow

までお願いしますm(_ _)m

powered by hm solution
お問い合わせ
お問い合わせ
gmt
© hm solution, Ltd.