描述:有时候我们想让一个元素在滑动一段距离之后定位在一个地方,比如说是菜单!这款插件让我们领略到了用户体验的便捷性,现在很多大的网站都这样来操作!现在我来讲述一下。
发音:
图片:
兼容浏览器:IE7+/Firefox/Google Chrome
注意事项:
1.在不支持 position:fixed; 的浏览器的效果不是很好(例如 IE6),可以在参数中设置 disableWorkaround:true 来禁止对这类浏览器的支持。
2.需将 portamento.js 放在 </head> 之后 </body> 之前,否则有可能会报错:Cannot call method 'replace' of undefined
官方链接:http://simianstudios.com/portamento
JS下载:http://www.ijquery.cn/js/portamento/portamento.js
预览:http://www.ijquery.cn/study/demo/portamento
打包下载:http://www.ijquery.cn/study/demo/portamento/portamento.zip
参数说明:
wrapper:$('body'), // 父容器 gap:10, // 与窗口顶部的边距(px)。 disableWorkaround false //不支持旧的浏览器。
JS代码:
<script type="text/javascript" charset="utf-8" src="http://www.ijquery.cn/js/portamento/portamento.js"></script> <script type="text/javascript"> $(function () { $("#sidebar").portamento({ gap:0, disableWorkaround:true }) }); </script>
HTML代码:
<div id="sidebar"><img height="188" width="250" alt="" src="http://www.ijquery.cn/ijqueryimages/01.jpg" /> <br/>看图片是不动的</div>
CSS代码:
/* 默认时的样式 */ #sidebar{} /* 滑动时的样式 */ #portamento_container{position:relative;z-index:99;} #portamento_container #sidebar{} #portamento_container #sidebar.fixed{position:fixed;}