是否曾经希望将某个页面元素钉在某段文本旁边?是否需要让某个元素一直挂在某个位置而不管是否滚动条滚动?jQuery.Pin能帮你完成这些需求。它能将任意页面元素“钉”在某个容器顶部,而且在尺寸小的屏幕上能够自动禁用这种效果。
下载此jQuery插件从Github代码库下载jquery.pin.js文件。然后在页面底部引入jQuery和jQuery.pin即可。
“钉”住某个元素(".pinned").pin()
将某元素“钉”在容器内(".pinned").pin({containerSelector:".container"})
在小尺寸的屏幕上禁用Pin效果(".pinned").pin({minWidth:})
滚动时,也可以在固定元素周围添加填充:
(".pinned").pin({padding:{top:10,bottom:10}})
在线示例: