JQuery滑动定位插件Portamento

简介

Portamento是一款能使滑动模块定位更容易的JQuery插件。只需数行CSS代码和一句JavaScript语句就可以简单实现。

参数说明：

wrapper:$('body'),    //       父容器
gap:10,                    //        与窗口顶部的边距(px)。
disableWorkaround:       false    //不支持旧的浏览器。

注意事项：

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

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

（附件中附有DEMO）

使用

1.  引入 portamento.js 文件

2.  HTML

<div id="sidebar">
  <img height="188" width="250" alt="" src="http://www.ijquery.cn/ijqueryimages/01.jpg" />
  <br/>看图片是不动的
</div>

[CSS]
<style>
/* 默认时的样式 */
#sidebar{}
/* 滑动时的样式 */
#portamento_container{position:relative;z-index:99;}
#portamento_container #sidebar{}
#portamento_container #sidebar.fixed{position:fixed;}
</style>

3.  调用

<script type="text/javascript">
  $(function () {
    $("#sidebar").portamento({gap:0,disableWorkaround:true})
  });
</script>

相关链接

官网地址 ：https://simianstudios.com/portamento/

Github 地址：https://github.com/krisnoble/Portamento/