注册 登录  
 加关注
查看详情
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

百鬼夜行

身是菩提树,心如明镜台,时时勤拂拭,勿使惹尘埃。

 
 
 

日志

 
 

jQuery Portamento 滑动定位  

2013-05-20 15:25:31|  分类: 插件及效果类 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
来源: http://simianstudios.com/portamento/
  • 版本:
  • ·jQuery v1.3.2+
  • ·Portamento v1.1.1

注意事项:

1.在不支持 position:fixed; 的浏览器的效果不是很好(例如 IE6),可以在参数中设置 disableWorkaround:true 来禁止对这类浏览器的支持。

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

【options 参数说明】(可选)

名称默认值说明
wrapper$('body')父容器
gap10与窗口顶部的边距(px)。
disableWorkaroundfalse不支持旧的浏览器。

【使用方法】

载入 JavaScript 文件

<script src="js/jquery.js"></script> 
<script src="js/jquery.portamento.js"></script>

DOM 结构(供参考)

<body> 
    <div>正常布局或内容</div> 
     
    <div id="sidebar">要滑动定位的元素</div> 
</body> 

CSS 样式

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

调用 Portamento

$("#sidebar").portamento({ 
    gap:0
    disableWorkaround:true 
})
  评论这张
 
阅读(445)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018