- 版本：
- jQuery v1.3.2+
- jQuery Portamento v1.1.1
- 注意事项：
- 在不支持
position:fixed的浏览器里效果不是很好（例如 IE6、iOS4），可以在参数中设置disableWorkaround: true来禁止对这类浏览器的支持； - 需将 portamento.js 放在
</head>之后</body>之前，否则有可能会报错：Cannot call method ‘replace‘ of undefined - github地址
在线实例
实例预览 no limit 基础示例
实例预览 No workaround 不支持旧的浏览器
实例预览 Bigger gap 设置边距
实例预览 Absolute with bottom limit 在绝对定位布局中设置父容器
实例预览 Floated with bottom limit 在浮动布局中设置父容器
使用方法
载入 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 | 不支持旧的浏览器。 |
下载
时间： 2024-10-07 06:07:11