position:fixed
的浏览器里效果不是很好(例如 IE6、iOS4),可以在参数中设置disableWorkaround: true
来禁止对这类浏览器的支持;</head>
之后</body>
之前,否则有可能会报错:Cannot call method 'replace' of undefined实例预览 no limit 基础示例
实例预览 No workaround 不支持旧的浏览器
实例预览 Bigger gap 设置边距
实例预览 Absolute with bottom limit 在绝对定位布局中设置父容器
实例预览 Floated with bottom limit 在浮动布局中设置父容器
<script src="jquery.js"></script>
<script src="jquery.portamento.js"></script>
/* 默认时的样式 */
#sidebar{}
/* 加载 Portamento 成功后的样式 */
#portamento_container{position:relative;z-index:99;}
#portamento_container #sidebar{}
/* 滑动时的样式 */
#portamento_container #sidebar.fixed{position:fixed;}
<body>
<div>正常布局或内容</div>
<div id="sidebar">要滑动定位的元素</div>
</body>
$('#sidebar').portamento({
gap: 0,
disableWorkaround: true
});
名称 | 默认值 | 说明 |
---|---|---|
wrapper | $('body') | 父容器 |
gap | 10 | 与窗口顶部的边距 (px) |
disableWorkaround | false | 不支持旧的浏览器。 |