Portamento是一款常用的jQuery用于实现网页浮动定位固定位置效果的JS插件,当网页滚动时,内容也会随着滚动。
用法
载入 JavaScript 文件
CSS 样式/* 默认时的样式 */
#sidebar{}
/* 加载 Portamento 成功后的样式 */
#portamento_container{position:relative;z-index:99;}
#portamento_container #sidebar{}
/* 滑动时的样式 */
#portamento_container #sidebar.fixed{position:fixed;}
DOM 结构
正常布局或内容
要滑动定位的元素
调用 Portamento$('#sidebar').portamento({
gap: 0,
disableWorkaround: true
});
参数说明
名称默认值说明wrapper$('body')父容器
gap10与窗口顶部的边距 (px)
disableWorkaroundfalse不支持旧的浏览器。
注意事项:
在不支持position:fixed的浏览器里效果不是很好(例如 IE6、iOS4),可以在参数中设置disableWorkaround: true来禁止对这类浏览器的支持;
需将 portamento.js 放在之后