介绍

图钉能把页面上的某个元素一直固定在那里，页面右侧的导航就是一个活生生的例子。

打开示例

示例代码

  $('.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, .block {
    height: 100%;
  }
        

jQuery插件初始化

这是一个简单的图钉初始化。让我们看看这些选项是什么和如何根据需要定制。

  $(document).ready(function(){
    $('.target').pushpin({
      top: 0,
      bottom: 1000,
      offset: 0
    });
  });
        

CSS类

一个图钉元素有三种状态。一个上面和下面的滚动的阈值和固定的状态，因为图钉改变定位，那么你的元素将有不同状态的变化，使用这些类来正确表示图钉的状态。

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

jQuery插件选项

选项名称	描述
Top	滚动条距离顶部有多少像素的时候开始固定。 (默认: 0)
Bottom	滚动条距离底部多少像素的时候取消固定 (默认: Infinity)
Offset	滚动条距离顶部有多少像素偏移量的时候开始固定.(默认: 0)

移除

从一个元素中移除图钉，通过 'remove'作为图钉函数的选项。

  //Removes pushpin and pushpin classes
  $('.tabs-wrapper .row').pushpin('remove');