jQueryで追従機能を設置、ウィンドウの高さが狭いときはどこまでもスクロールができてしまい困っております

Question

###前提・実現したいこと
2カラム構造のページを作成しております、左側にはコンテンツ領域を右側にはサイドバー領域を設けましたが、このサイドバーを追従メニューにしようと思い、jqueryを使って実装しました。しかし、ウィンドウ幅が狭い場合はどこまでもスクロールができてしまう事態が発生してしまいました。

###該当のソースコード

<div id="wrap">
	<div class="inner">
		<div id="main">
			<header>
				<nav>
					<ul>
						<li><a href="#"><em>MESSAGE</em>メッセージ</a></li>
						<li><a href="#"><em>SERVICE</em>事業内容</a></li>
						<li><a href="#"><em>ABOUT</em>会社概要</a></li>
						<li><a href="#"><em>CONTACT</em>お問い合わせ</a></li>
						<li><a href="#"><em>MESSAGE</em>メッセージ</a></li>
						<li><a href="#"><em>SERVICE</em>事業内容</a></li>
						<li><a href="#"><em>ABOUT</em>会社概要</a></li>
						<li><a href="#"><em>CONTACT</em>お問い合わせ</a></li>
					</ul>
				</nav>
			</header>
			<article>
				<h2 class="tit02">サイト</h2>
				<img src="http://placehold.it/920x540/27709b/ffffff">
				<div class="sp_waku">
					こんにちわ<br><br><br><br><br><br><br><br><br>こんにちわ<br><br><br><br><br><br><br><br><br>こんにちわ<br><br><br><br><br><br><br><br><br>
				</div><!-- / .sp_waku -->
				<div id="footer">
					<h2 class="common-tit01">フッターの内容</h2>
					<p><br><br><br><br><br><br><br></p>
				</div>
			</article>

		</div>
	</div><!-- / .inner -->
	<!--/newsbox--> 
</div>

.inner {
    max-width: 1170px;
    min-width: 1170px;
    width: auto;
    margin: 0 auto;
}

#main{
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: space-between;
	justify-content: space-between;
  -webkit-flex-direction: row-reverse; /* Safari */
  flex-direction:         row-reverse;
}


#main > header{
	width:210px;
	background:#ccc;
}

#main > header nav ul li a{
	display:block;
	padding:20px 0;
}

#main > article{
	width:920px;
	background:#eee;
}

#footer{
	background-color: #888;
}

<script src="js/jquery-1.12.0.min.js"></script>
<script>
$(function(){
	if($("header nav").length){ //.length特定の要素が存在するかのチェック
		var obj = $("header nav");	
		var offset = $(obj).offset();
		//console.log(offset);
		var topPadding = 0;
		$(window).scroll(function() {
			if ($(window).scrollTop() > offset.top) {
				$(obj).css('margin-top',$(window).scrollTop() - offset.top + topPadding);
			} else {
				$(obj).css('margin-top',0);
			}
		});
	}
});
</script>

###発生している問題・エラーメッセージ

通常のウィンドウサイズで見ているときには問題はございません。
ウィンドウの高さサイズを縮めてみた際、「ウィンドウの高さ」＜「メニュー分の高さ」になったときに、
下スクロールをした場合、スクロールが無限にできてしまいます、それに伴いjQueryで設定したスクロール分「margin-top」を上書きし続けるという機能が発動し続けてどこまでもmargin-topが入ってしまします。
大変お手数ではございますが、どなた様かお分かりになられる方がいらっしゃいましたらご教示いただけましたら幸いでございます、どうぞよろしくお願いいたします。
下記にソースを載せておきます。
デモページも作成しました。
デモページはこちら

【追記】
サイドバーのコンテンツの高さよりブラウザサイズが小さい場合は
「サイドバーのコンテンツがすべて表示されなくてもよい」という仕様です。

Comments

[kanimaru]

1点仕様が不明なので確認させてください。サイドバーのコンテンツの高さよりブラウザサイズが小さい場合は、サイドバーのコンテンツがすべて表示されなくてもいいのか、それとも、サイドバーのコンテンツ分の高さを必ずとるのでしょうか？
後者の場合、フッターは常にページ下部なのか、それともフッタより下に領域ができていいのでしょうか？

[holic]

kanimaru様ご質問ありがとうございます。前者のほう（サイドバーのコンテンツがすべて表示されなくてもよい）で大丈夫です。

Answer 1

まともに実装するとなると、バグの温床になりやすいのと処理のコスト高いので

CSSで対応した方がいいと思いますよ。

header nav{
    position: fixed;
    transform: translate3d(0, 0, 0);// ios対応
}

Comments

[holic]

kanimaruさん、回答ありがとうございます。
実際に実装してみました、今度はウィンドウズ横サイズを縮めて横スクロールした時にサイドバーメニューが表示されない事態が起きました、これについて解決できますでしょうか。

[kanimaru]

CSSでflexが利用されてるのでどちらかの取捨選択になりますね・・。
floatで浮かして並べる場合はいいんですが、FLEXで操作すると
この方式ができません。
きちんと確認せずすみません。

Answer 2

$(window).scroll(function() {
            if( $(window).height() > $("header nav").height() && $(window).scrollTop() > offset.top){
                $(obj).css('margin-top',$(window).scrollTop() - offset.top + topPadding);
            } else {
                $(obj).css('margin-top',0);
            }

みたいにすれば良いのかなと思います。

Comments

[holic]

oskbtsさんご回答ありがとうございます、
試してみました。
条件分がfalseの場合はまったく追従しなくなってしまう点は直せないでしょうか。
ウィンドウの高さが狭まったとしても追従はさせたいところなのです。