Portamento.js 网页固定位置浮动插件


Chrome
Firefox
Safari
ie9+

在线演示
本商品为电子商品,具有可复制性,一经售出,不可退换!

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

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

Portamento 是一个 jQuery 插件,可以很容易地为您的网页添加滑动(也称为“浮动”)面板功能。所需要的只是一些简单的 CSS 和一行 JavaScript,你就走了!

如果浏览器的窗口太小而无法显示整个面板,Portamento 也会有明智的行为,因此您无需担心用户无法看到您的重要内容。

兼容版本

jQuery v1.3.2+
jQuery Portamento v1.1.1

使用方法

载入 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’) 父容器
gap 10 与窗口顶部的边距 (px)
disableWorkaround false 不支持旧的浏览器。
参考



没有账号? 忘记密码?

社交账号快速登录