サイドバーのスクロールを途中で固定する方法

jQueryを読み込んでいるので、一番簡単そうなのはこれである。

<script>
$(function($) {
	var tab = $('.hoge'),
    offset = tab.offset();

$(window).scroll(function () {
  if($(window).scrollTop() > offset.top) {
    tab.addClass('fixed');
  } else {
    tab.removeClass('fixed');
  }
});
});
</script>

hogeが上にきたら、hogeにfixedというcssを適応するというもの。

とりあえず、hogeをサイドバーに準備。
HTMLをサイドバーに追加しする。

<p class="hoge">ここがTOPにきたら止まる</p>

追加するCSSはこれ。

.fixed{
	position:fixed;
	top:25px;
}

これで、一応hogeは、一番上で固定される。

一応である。

問題は、背景（box2）は、当然スクロールしていく。
そして、レスポンシブの時も動作して、変なことになる。

f:id:wedges:20150201195804p:plain

そこで、CSSに、背景などを設定して表示を調整。
さらに、PCでサイドバーが横に出ている時だけに限定してみた。

@media (min-width: 1025px) {
.fixed{
	position:fixed;
	top: 10px;
	width: 320px;
	background-color: #FFF;
	border: 1px solid #DADADA;
	border-radius: 5px;
	box-sizing: border-box;
	padding: 50px 10px;
	margin: 15px 0 0 -11px;
}
}