jQuery Portamento 滑动定位


  • 版本:
  • 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')父容器
gap10与窗口顶部的边距 (px)
disableWorkaroundfalse不支持旧的浏览器。

下载地址