https://www.agara.co.jp/js/lib/side_fixed/side_fixed.js

1$(window).load(function () {
2
3	//該当のセレクタなどを代入
4
5	var mainArea = $("#js-main"); //メインコンテンツ
6	var sideWrap = $("#js-sidebar"); //サイドバーの外枠
7	var sideArea = $("#js-sidebar_wrap"); //サイドバー
8
9	/*設定ここまで*/
10
11	var wd = $(window); //ウィンドウ自体
12
13
14	//メインとサイドの高さを比べる
15
16	var mainH = mainArea.height();
17	var sideH = sideWrap.height();
18
19
20	if(window.matchMedia( '(min-width: 961px)' ).matches && sideH < mainH) { //メインの方が高ければ色々処理する
21
22		//サイドバーの外枠をメインと同じ高さにしてrelaltiveに（#sideをポジションで上や下に固定するため）
23		sideWrap.css({"height": mainH,"position": "relative"});
24
25		//サイドバーがウィンドウよりいくらはみ出してるか
26		var sideOver = wd.height()-sideArea.height();
27
28		//固定を開始する位置 = サイドバーの座標＋はみ出す距離
29		var starPoint = sideArea.offset().top + (-sideOver);
30
31		//固定を解除する位置 = メインコンテンツの終点
32		var breakPoint = sideArea.offset().top + mainH;
33
34		wd.scroll(function() { //スクロール中の処理
35
36			if(wd.height() < sideArea.height()){ //サイドメニューが画面より大きい場合
37				if(starPoint < wd.scrollTop() && wd.scrollTop() + wd.height() < breakPoint){ //固定範囲内
38					sideArea.css({"position": "fixed", "bottom": "0"});
39
40				}else if(wd.scrollTop() + wd.height() >= breakPoint){ //固定解除位置を超えた時
41					sideArea.css({"position": "absolute", "bottom": "0"});
42
43				} else { //その他、上に戻った時
44					sideArea.css("position", "static");
45
46				}
47
48			}else{ //サイドメニューが画面より小さい場合
49
50				var sideBtm = wd.scrollTop() + sideArea.height(); //サイドメニューの終点
51
52				if(mainArea.offset().top < wd.scrollTop() && sideBtm < breakPoint){ //固定範囲内
53					sideArea.css({"position": "fixed", "top": "20px"});
54
55				}else if(sideBtm >= breakPoint){ //固定解除位置を超えた時
56
57					//サイドバー固定場所（bottom指定すると不具合が出るのでtopからの固定位置を算出する）
58					var fixedSide = mainH - sideH;
59
60					sideArea.css({"position": "absolute", "top": fixedSide});
61
62				} else {
63					sideArea.css("position", "static");
64				}
65			}
66
67
68		});
69
70	}
71
72});