プッシュピンは固定位置設定プラグインです。これは、特定のスクロール範囲内においてページ上の要素をピン留めするために使います。ライブ example: 右側の固定目次をご覧ください。

デモを開く

デモコード

  $('.pushpin-demo-nav').each(function() {
    var $this = $(this);
    var $target = $('#' + $(this).attr('data-target'));
    $this.pushpin({
      top: $target.offset().top,
      bottom: $target.offset().top + $target.outerHeight() - $this.height()
    });
  });
        

  // Only necessary for window height sized blocks.
  html, body {
    height: 100%;
  }
        

初期化

プッシュピンの初期化のサンプルです。オプションの内容を確認して必要に応じカスタマイズしてください。

  document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.pushpin');
    var instances = M.Pushpin.init(elems, options);
  });

  // Or with jQuery

  $(document).ready(function(){
    $('.pushpin').pushpin();
  });
        

オプション

名前	タイプ	初期値	説明
top	数値	0	要素が固定される、ページ上部からの距離（ピクセル）。
bottom	数値	無限大	要素が固定されなくなる、ページ上部からの距離（ピクセル）。
offset	数値	0	要素が固定される、上部からのオフセット。
onPositionChange	関数	null	プッシュピンの位置が変更されたときに呼び出されるコールバック関数。位置を表す文字列が提供されます。

メソッド

jQuery が依存関係ではなくなったため、すべてのメソッドはプラグインインスタンスに対して呼び出されます。プラグインインスタンスはこのように取得できます

  var instance = M.Pushpin.getInstance(elem);

  /* jQuery Method Calls
    You can still use the old jQuery plugin method calls.
    But you won't be able to access instance properties.

    $('.target').pushpin('methodName');
    $('.target').pushpin('methodName', paramName);
  */
        

.destroy();

プラグインインスタンスを消去して終了します

instance.destroy();
      

プロパティ

名前	タイプ	説明
el	エレメント	プラグインが初期化された DOM エレメント。
options	オブジェクト	インスタンスが初期化された際のオプション。
originalOffset	数値	エレメントの元の offsetTop。

CSS クラス

プッシュピン留めされたエレメントには 3 つの状態があります。スクロールしきい値の上と下、およびエレメントが固定されるピン留め状態です。プッシュピンは位置を変更するため、状態が変更されるとエレメントの見た目が異なる可能性があります。これらの CSS クラスを使用して、3 つの状態のスタイルを正しく設定してください。

  // Class for when element is above threshold
  .pin-top {
    position: relative;
  }

  // Class for when element is below threshold
  .pin-bottom {
    position: relative;
  }

  // Class for when element is pinned
  .pinned {
    position: fixed !important;
  }