图钉是我们的固定定位插件。使用此选项可以在特定滚动范围内将元素固定到页面上。你可以查看我们的实际示例：右侧的固定目录。

打开示例

示例代码

  $('.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()
    });
  });
        

  // 仅适用于窗口高度大小的砌块。
  html, body {
    height: 100%;
  }
        

初始化

Here is a sample initialization of pushpin. Take a look at what the options are and customize them to your needs.

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

  // 或用JQuery

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

选项

名称	类型	默认	描述
top	Number	0	The distance in pixels from the top of the page where the element becomes fixed.
bottom	Number	Infinity	The distance in pixels from the top of the page where the elements stops being fixed.
offset	Number	0	The offset from the top the element will be fixed at.
onPositionChange	Function	null	Callback function called when pushpin position changes. You are provided with a position string.

方法

因为jQuery不再是一个依赖项，所以所有的方法都是在插件实例上调用的。你可以获得插件实例如下：

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

  /* JQuery方法调用
          您仍然可以使用旧的jQuery插件方法调用。
      但您将无法访问实例属性。

    $('.target').pushpin('方法名称');
    $('.target').pushpin('方法名称', 参数名称);
  */
        

.destroy();

销毁插件实例并回收

instance.destroy();
      

属性

名称	类型	描述
el	Element	插件初始化时使用的DOM元素。
options	Object	初始化实例时使用的选项。
originalOffset	Number	Original offsetTop of element.

CSS类

A pushpinned element has 3 states. One above and below the scrolling threshold, and the pinned state where the element becomes fixed. Because pushpin changes positioning, chances are your element will look different when the states change. Use these css classes to correctly style your 3 states.

  // 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;
  }