jQuery

【jQuery】スティッキーサイドバーjQueryプラグインjQuery ScrollsWith

March 9, 2017
jQuery scrollsWith plugin

jQuery ScrollsWithはスティッキーサイドバーjQueryプラグイン

Usage

<div data-sidebar-dummy="sidebar1" ></div>
<div id="sidebar1" >...</div> 

スクロール位置が終わる場所にボトムダミー要素を挿入

CONTENT...
<div data-sidebar-bottom="sidebar1" ></div>

jQuery、scrollsWithを追加

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script&g
<script src="js/scrollsWith.js"></script>

サイドバー

$("#sidebar1").scrollsWith(); //or
$("#sidebar1").scrollsWith({margin_top: 30, fixedClass: 'is-fixed'});

Options

dummy_attr default: ‘data-sidebar-dummy’
bottom_dummy_attr default: ‘data-sidebar-bottom’
attr_value default: null
margin_top default: 0
fixedClass default: ‘fixed’
minWidth default: 200

MIT