建站资源下载详情
为您免费提供多种建站资源下载,包括网站模板下载、前端插件下载和字体下载!您只需注册为会员即可任意下载!

JQuery滑动定位插件Portamento

来源:易助科技网浏览量:15收藏

简介


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


JQuery滑动定位插件Portamento-示例图


参数说明:


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/