欢迎光临一流素材网,免积分免费素材下载!
AD
当前位置:首页 > JS代码 > 弹窗漂浮

Portamento-浮动固定位置/滑动定位插件

所属栏目:弹窗漂浮更新时间:2017-08-22原作者:不详发布者:deepdfhy浏览:0
基本信息
  • 发布者:
  • 原作者:不详
  • 来源:不详
  • 版权声明


Portamento是一款常用的jQuery用于实现网页浮动定位固定位置效果的JS插件,当网页滚动时,内容也会随着滚动。

用法

载入 JavaScript 文件

<script src="jquery.js"></script>
<script src="jquery.portamento.js"></script>

CSS 样式

/* 默认时的样式 */
#sidebar{}
/* 加载 Portamento 成功后的样式 */
#portamento_container{position:relative;z-index:99;}
#portamento_container #sidebar{}
/* 滑动时的样式 */
#portamento_container #sidebar.fixed{position:fixed;}

DOM 结构

<body>
  <div>正常布局或内容</div>
  <div id="sidebar">要滑动定位的元素</div>
</body>

调用 Portamento

$('#sidebar').portamento({
  gap: 0,
  disableWorkaround: true
});

参数说明


名称默认值说明
wrapper$('body')父容器
gap10与窗口顶部的边距 (px)
disableWorkaroundfalse不支持旧的浏览器。

注意事项:

在不支持position:fixed的浏览器里效果不是很好(例如 IE6、iOS4),可以在参数中设置disableWorkaround: true来禁止对这类浏览器的支持;

需将 portamento.js 放在</head>之后</body>之前,否则有可能会报错:Cannot call method 'replace' of undefined


具体效果请看演示,一流资源网推荐下载。

标签:
代码下载
本站下载
收藏 0 有帮助 0 没帮助 0
请站长喝杯咖啡?

站长一直坚持白天工作、晚上熬夜更新素材,付出了巨大的精力和时间,其中的辛酸难以言述。

如果本站素材对你有用,不妨考虑请站长喝杯咖啡鼓励一下!

立即打赏 0
给个评价吧
最受欢迎的

1微信扫一扫打开网址提示”在外部浏览器中打开“的代码

2微信扫描打开网址点击APP下载链接才提示在外部浏览器中打开代码

3一款二维码微信右边悬浮框效果代码

4jquery仿天猫右侧栏飞入加入购物车 返回顶部代码

5可设置每天只弹出一次的JS弹窗代码jquery.cookie

6可定时几秒后自动关闭的js弹出层广告代码

7网页返回顶部Jquery插件-jquery.returnTop

8网页自动弹出添加QQ好友邀请对话框的JS代码

9英文版加网社会化分享按钮代码

10打开网页几秒后弹出浮动层的JS代码

最新更新的

1XY_Dialog - 基于jQuery的弹出层插件

2优秀的jquery弹出层效果插件 - Fancybox

3jquery win8风格的页面返回顶部按钮代码带二维码和qq在线客服

4微信扫描打开网址点击APP下载链接才提示在外部浏览器中打开代码

5微信扫一扫打开网址提示”在外部浏览器中打开“的代码

6打开网页几秒后弹出浮动层的JS代码

7网页自动弹出添加QQ好友邀请对话框的JS代码

8Portamento-浮动固定位置/滑动定位插件

9可设置每天只弹出一次的JS弹窗代码jquery.cookie

10JQuery多功能右侧飘浮客服代码