jQuery Portamento 滑动定位
- 版本：
- jQuery v1.3.2+
- jQuery Portamento v1.1.1
- 注意事项：
- 在不支持
position:fixed的浏览器里效果不是很好（例如 IE6、iOS4），可以在参数中设置disableWorkaround: true来禁止对这类浏览器的支持； - 需将 portamento.js 放在
</head>之后</body>之前，否则有可能会报错：Cannot call method 'replace' of undefined
在线实例
实例预览 no limit 基础示例
实例预览 No workaround 不支持旧的浏览器
实例预览 Bigger gap 设置边距
实例预览 Absolute with bottom limit 在绝对定位布局中设置父容器
实例预览 Floated with bottom limit 在浮动布局中设置父容器
使用方法
载入 JavaScript 文件
<script src="jquery.js"></script><script src="jquery.portamento.js"></script>
CSS 样式
/* 默认时的样式 */#sidebar{}/* 加载 Portamento 成功后的样式 */#portamento_container{position:relative;z-index:99;}#portamento_container #sidebar{}/* 滑动时的样式 */#portamento_container #sidebar.fixed{position:fixed;}
DOM 结构
<body><div>正常布局或内容</div><div id="sidebar">要滑动定位的元素</div></body>
调用 Portamento
$('#sidebar').portamento({gap: 0,disableWorkaround: true});
参数说明
| 名称 | 默认值 | 说明 |
|---|---|---|
| wrapper | $('body') | 父容器 |
| gap | 10 | 与窗口顶部的边距 (px) |
| disableWorkaround | false | 不支持旧的浏览器。 |
jQuery Portamento 滑动定位的更多相关文章
- 基于jQuery左右滑动切换特效 附源码
分享一款基于脚jQuery左右滑动切换特效.这是一款鼠标点击左右箭头按钮图片滚动切换,鼠标移到图片上显示透明边框特效. 效果图如下: 废话不多说,代码奉上! html代码: <div ...
- jquery左右滑动效果的实现
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jQuery 效果 —— 滑动
jQuery 效果 -- 滑动 1.向下滑动元素 (1)使用slideDown()方法可以用于向下滑动元素 $("button").click(function(){ $(&quo ...
- 全新jquery多点滑动幻灯片——全屏动画animateSlide
首页banner的酷炫效果多来自全屏大图的幻灯片动画,下面提供一种完美兼容的jquery动画特效:全新jquery多点滑动幻灯片——全屏动画animateSlide(代码完全原创). 直接上代码,把h ...
- 19个非常有用的 jQuery 图片滑动插件和教程
jQuery 是一个非常优秀的 Javascript 框架,使用简单灵活,同时还有许多成熟的插件可供选择.其中,最令人印象深刻的应用之一就是对图片的处理,它可以让帮助你在你的项目中加入精美的效果.今天 ...
- 20 个非常棒的jQuery内容滑动插件
Wow Slider WOW Slider是一款小巧易用的网页滑块设计.该软件内置大量的模版和工具,让你轻松设计出完美的视觉效果.他还可以帮助用户在短时间内创造出梦幻般的滑块,而无需编码和图像编辑, ...
- Android 滑动定位+吸附悬停效果实现
在前两篇文章中,分别介绍了tablayout+scrollview 和 tablayout+recyclerview 实现的滑动定位的功能,文章链接: Android 实现锚点定位 Android t ...
- 基于jQuery左右滑动切换特效
分享一款基于脚jQuery左右滑动切换特效.这是一款鼠标点击左右箭头按钮图片滚动切换,鼠标移到图片上显示透明边框特效.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div ...
- 基于jQuery左右滑动切换图片代码
分享一款基于jQuery左右滑动切换图片代码.这是一款基于jQuery实现的左右滑动切换焦点图代码.效果图如下: 在线预览 源码下载 实现的代码: <div class="v_ou ...
随机推荐
- UvaOJ10369 - Arctic Network
/* The first line of each test case contains 1 <= S <= 100, the number of satellite channels! ...
- java中如何生成可执行的jar文件
java中如何生成可执行的jar文件 最简单的方法就是: jar -cfe Card.jar CardLayoutDemo CardLayoutDemo$1.class CardLayoutDemo$ ...
- Cocos2d-x 3.2 学习笔记（四）学习打包Android平台APK!
从cocos2dx 3.2项目打包成apk安卓应用文件,搭建安卓环境的步骤有点繁琐,但搭建一次之后,以后就会非常快捷! (涉及到3.1.1版本的,请自动对应3.2版本,3.x版本的环境搭建都是一样的) ...
- Java多线程系列--“JUC集合”09之 LinkedBlockingDeque
概要 本章介绍JUC包中的LinkedBlockingDeque.内容包括:LinkedBlockingDeque介绍LinkedBlockingDeque原理和数据结构LinkedBlockingD ...
- WIN7 共享网络方法
WIN7 共享网络方法 第一步: 按WIN+R调出“运行”栏,在“运行”菜单栏输入“cmd”,出现命令提示符,输入命令“netsh wlan set hostednetwork mode=allow ...
- QT学习笔记2
初探信号槽 代码如下: QPushButton *button=new QPushButton("quit"); QObject::connect(button,SIGNAL(cl ...
- Elasticsearch——Search的基本介绍
Elasticsearch最常用的方法莫过于查询了.Es支持以URI请求参数或者请求体的方式进行查询. 查询范例 Elasticsearch支持对多索引以及多类型进行查询. 比如,下面对某个特定索引的 ...
- iOS平台快速发布HT for Web拓扑图应用
iOS平台一直是封闭的生态圈,iOS开发者要缴纳年费加入开发者计划才可进行iOS平台的APP开发测试,所开发的APP需要上传到App Store经过苹果审核以后才可对外发布.如果要开发企业内部应用,则 ...
- react经典进阶demo
这是我在官方文档上看到的,功能是实现(具体是什么,请往下看) 以下是json数据: [ {category: "Sporting Goods", price: "$49. ...
- NET RichTextBox控件如何可以插入图像
本文介绍.NET RichTextBox控件如何可以插入图像,控制和ActiveX对象通过使用OLE方式,如在解释,.不幸的是,它涵盖了只用一个C源代码样本,所以我需要在托管代码(C#)实施类似的解决 ...