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

powered by hm solution

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

お問い合わせ
ブログTOP » web » コーディング » サイドメニューが下まで行ったらそこで固定するJS(jQuery)

サイドメニューが下まで行ったらそこで固定する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

人気記事

カテゴリ一覧

ホームページを新規制作・リニューアルしたい方 ホームページ診断 神戸ホームページ制作センター採用情報
弊社が手がけた制作実績 スタッフブログ ECの運営ならコンサルロケッツにお任せください!!ギュイーン!!
充実の運用サポート 失敗する業者選びの典型例

制作サイトSEO対策実績

今月のSEO対策結果
キーワード順位
出張マッサージ 京都
1位
手元供養 通販
1位
ユニバーサルマナー
1位
外壁塗装 神戸
2位
整体 大阪
1位
姫路 工務店
2位
ブライダルまつげ 神戸
2位
神戸 温泉
1位
葬儀 神戸
1位
温泉 神戸
2位
葬儀 大阪
4位
出張マッサージ 名古屋
3位
学生 プロモーション
1位
オークション 代行
3位
コンテナ 販売
3位
目 資格
1位
学生 広告
1位
大阪 ホテル
1位
ヘアサロン 南船場
3位
リフォーム
1位
ブランドメガネ 買取
3位
防犯カメラ 神戸
1位
大阪 ホテル
1位
兵庫 探偵
2位
出張マッサージ 神戸
1位
カルジェルネイル 神戸
2位
フィラリア予防
3位
神戸 ネットカフェ
1位
薬剤師 求人
1位
合宿免許 ローン
1位
美容院 南船場
3位
神戸 婚活
1位

2013年09月調査結果の一部

ホームページ制作対応エリア

制作エリア
【営業地域】
大阪府/奈良県/滋賀県/京都/和歌山/三重/兵庫県/神戸市/神戸市北区/神戸市西区/三田市/宝塚市/川西市/篠山市/三木市/小野市 /尼崎市/芦屋市/明石市/伊丹市/西宮市/姫路市/西脇市/豊岡市/加古川市/加西市/加東市/相生市/赤穂市/朝来市/淡路市/市川町/宍粟市/竜野市/丹波

【受注可能地域】
大阪府/兵庫県/京都府/滋賀県/奈良県/
和歌山県/三重県/岡山県/徳島県など
全国各地
Googleビジネスパートナー
powered by hm solution
お問い合わせ
お問い合わせ
gmt
© hm solution, Ltd.