jQuery

【jQuery】スティッキーサイドバーを作成するSticky Sidebar

May 18, 2017
sticky sidebar

Sticky Sidebarは高性能なスティッキーサイドバーを作成するためのjQueryプラグイン。

Usage

<div id="main-content" class="main">
    <div id="sidebar" class="sidebar">
        <div class="sidebar__inner">
            <!-- Content goes here -->
        </div>
    </div>
    <div id="content" class="content">
        <!-- Content goes here -->
    </div>
</div>
<script type="text/javascript" src="./js/jquery.js"></script>
<script type="text/javascript" src="./js/sticky-sidebar.js"></script>

<script type="text/javascript">
    $(document).ready(function(){
        $("#sidebar").stickySidebar({
            containerSelector: '.sidebar__inner'
        });	
    });
</script>

データ属性

スティッキーにしたい要素にdata-sticky-sidebarを追加。
オプションを設定Example:data-top-spacing="50"

<div id="container" data-sticky-sidebar-container>
    <div id="#sidebar" data-sticky-sidebar data-top-spacing="50">
    	<!-- Content Goes Here -->
    </div>
    <div id="content">
    	<!-- Content Goes Here -->
    </div>
</div>	

CSS

.sidebar{
    will-change: min-height;
}

.sidebar__inner{
    transform: translate3d(0, 0, 0);
    transform: translate(0, 0); /* For browsers don't support translate3d. */
    will-change: position, transform;
}

Options

  1. topSpacing
  2. bottomSpacing
  3. containerSelector
  4. innerWrapperClass
  5. resizeSensor
  6. stickyClass
  7. minWidth

MIT