jQuery

【jQuery】シンプルで軽量のスクロール時に要素を固定するSticky Element

May 7, 2017
sticky element

Sticky Elementはシンプルで軽量の指定されたコンテナの境界内のページで要素をスクロールするjQueryプラグイン

Usage

<script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="jquery.stickyelement.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        // Without options
        $('scrolling_item_selector').sticky('scrolling_container_selector');

        // With options
        $('scrolling_item_selector').sticky('scrolling_container_selector', {
            useTransition: false,
            animate: true,
            animTime: 1000
        });
    });
</script>

Options

Name Default
useTransition true
animate true
animTime 200
animDelay 300
offset 0

Methods

  1. update
  2. toggleFreeze
  3. setBoundaries
  4. moveIt
  5. setOffset

Example usage

// This will update the sticky element's offset
$('#sticky').sticky('setOffset', 50);

Events

  1. sticky-created
  2. sticky-update
  3. sticky-hit-top
  4. sticky-hit-bottom
  5. sticky-frozen
  6. sticky-unfrozen

MIT