
スクロールしていった時に要素を固定位置に表示することができる「Sticky-Kit」
2013年8月9日jQueryプラグイン活用
スクロールしていった時、ナビゲーションやサイドバーなどの常に固定位置へ表示しておきたい要素がある時に有効です。
JavaScript
(function($){ $(function() { return $('#side').stick_in_parent({ parent: '#container' }); }); })(jQuery);
HTML
<div id="container"> <div id="contents"> <div class="section">section</div> <div class="section">section</div> <div class="section">section</div> </div> <div id="side">side</div> </div>
CSS
#container { width: 1000px; margin: 0 auto; overflow: hidden; } #contents { width: 740px; float: left; } #contents .section { height: 1000px; margin-top: 20px; padding: 10px; background-color: #ffffff; } #side { width: 200px; height: 200px; margin: 20px 20px 0 0; background-color: #ffbc30; padding: 10px; color: #ffffff; float: right; }