最新消息:

第63款插件:portamento.js页面滑动定位

高级页面 杨红伟 4424浏览 0评论

描述:有时候我们想让一个元素在滑动一段距离之后定位在一个地方,比如说是菜单!这款插件让我们领略到了用户体验的便捷性,现在很多大的网站都这样来操作!现在我来讲述一下。

发音:

图片:

11

兼容浏览器: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/demo/portamento

打包下载:http://www.ijquery.cn/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;}

发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址