jQuery.Pin 在网页中固定元素显示位置

Question

是否曾经希望将某个页面元素钉 在某段文本旁边？是否需要让某个元素一直挂在某个位置而不管是否滚动条滚动？jQuery.Pin 能帮你完成这些需求。它能将任意页面元素“钉”在某个容器顶部，而且在尺寸小的屏幕上能够自动禁用这种效果。

下载此 jQuery 插件

从 Github 代码库 下载  jquery.pin.js 文件。然后在页面底部引入 jQuery 和 jQuery.pin 即可。

“钉”住某个元素

$(".pinned").pin()

将某元素“钉”在容器内

$(".pinned").pin({
      containerSelector: ".container"
})

在小尺寸的屏幕上禁用 Pin 效果

$(".pinned").pin({
      minWidth: 940
})

滚动时，也可以在固定元素周围添加填充：

$(".pinned").pin({padding: {top: 10, bottom: 10}})

在线示例：http://webpop.github.io/jquery.pin/