Question

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

示例代码

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