任意のブロック要素をページのスクロールに合わせて動かすjQuery plugin
以下のタグをHTML内に書く。
<script src="//code.jquery.com/jquery.min.js"></script>
<script src="jquery.smartpane.min.js"></script>スクロールに合わせて動かしたいブロック要素に、data-smartpane 属性を書く。
<div data-smartpane="bottom">指定できる値は以下の3つです。
- top
- 画面上に張り付くように動きます。
- bottom
- 画面下に張り付くように動きます。
- both
- 下にスクロールするときは画面下に、上にスクロールするときは画面上に張り付くように動きます。
data-smartpane属性を指定する代わりに、jQueryのメソッドでも指定できます。
$(function(){
$('.side-block').smartpane('bottom');
});ページ上部に固定表示されるヘッダーがある場合は、optionsメソッドでヘッダーのIDを指定してください。
$.smartpane.options({fixedHeader:'#headerId'});- bottomを指定しても、smartpaneを指定したブロックの高さが表示領域内に収まる場合はtopとして動きます。
- 要素のmarginや親要素のpaddingのことが考えられてません。
- スクロールの途中でpositionをfixedにするため、左側のカラムで使う場合は調整が必要です。