10
September
Sticky スクロールするとサイドバーがついてくるjQuery
http://webkaru.net/jquery-plugin/sticky/
https://github.com/garand/sticky
<script type="text/javascript" src="jquery.sticky.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#side_inner").sticky({topSpacing:230, bottomSpacing:600});
});
</script>
Contained Sticky Scroll を前に使っていたので今回もこれを使おうと思った。
しかし今回はサイドバーを上にで引っ張りあげており、このJQueryだと元あった位置から追従するため、上部が見切れてスクロールしてしまった。
上下の間隔を指定するオプションがあるのかないのかわかんないしよく調べてないので、他のjQueryを探した。
手書きのものとかもコピペして色々試したが、サイドバーの下にfloatしているmainカラムがもぐりこんじゃって、なんでこうなるの状態。
Contained Sticky Scroll ではレイアウトが崩れたりはしない。
どうしよーーーというときに「Sticky」（今調べたがスクロールして追従する技術をスティッキーというらしい）を発見。
崩れない！オプションで上下にpadding的なものをいれられる！見切れ改善！わーい！思い通りにできた！！！今度からコレ使うわ。
※<div id="side"><div id="side_inner">サイドバー</div></div>
※囲いを二重にして、中のものに指定しないとちゃんとできない気がする
PR