jQuery.Pin 在网页中固定元素显示位置 - 文章教程

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

发布于 2020-06-21 字数 1287 浏览 1286 评论 0

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

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/

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2583 文章
29 评论
84935 人气
更多

推荐作者

清欢

文章 1 评论 0

贱贱哒

文章 3 评论 0

悸初

文章 2 评论 0

西瓜杏

文章 0 评论 0

各自安好

文章 0 评论 0