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 ...
随机推荐
- webpack学习笔记
1.安装webpack npm install webpack -g 2.进入项目目录,初始化 npm init 3.将webpack安装到项目依赖中 npm install webpack --sa ...
- Comet服务器推送与SignalR
HTTP协议是一个典型的Request/Response协议,是基于TCP/IP之上的一个应用层协议,该协议最典型的特点就是无状态且需要客户端发起Request服务端才能进行Response, ...
- 详解JavaScript模块化开发
什么是模块化开发? 前端开发中,起初只要在script标签中嵌入几十上百行代码就能实现一些基本的交互效果,后来js得到重视,应用也广泛起来了,jQuery,Ajax,Node.Js,MVC,MVVM等 ...
- WPF自定义控件与样式(10)-进度控件ProcessBar自定义样
一．前言 申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等,若有不明白的地方可以参考本系列前面的文章,文末附有部分文章链接. 本文主要内容: Pro ...
- heroku部署java web项目
一.开发 在本地eclipse创建maven web项目(此时可以当成正常的javaweb项目开发即可.注意添加servlet依赖,此时不用添加jetty依赖) 二.部署前准备 1.首先在pom.xm ...
- struts2拦截器
一.自定义拦截器 struts2拦截器类似于servlet过滤器 首先定义一个拦截器这个拦截器实现了Interceptor接口: package cn.orlion.interceptor; impo ...
- poj3249Test for Job（记忆化搜索）
/* 题意:给一个DAG图,n个节点,每个节点都对应一个值,入度为零的点走到出度为零的点,计算所有可能路径 经过节点值的和最大! 思路:记忆话搜索:也就是如果我们搜索到某一个节点的时候发现该节点已经存 ...
- C#对称加密（AES加密）每次生成的密文结果不同思路代码分享
思路:使用随机向量,把随机向量放入密文中,每次解密时从密文中截取前16位,其实就是我们之前加密的随机向量. 代码 public static string Encrypt(string plainTe ...
- JS实现弹出层对话框
点击按钮后,弹出层对话框,可交互,点击关闭后才关闭掉对话框. 效果图: 源码: <!doctype html> <html> <head> <meta cha ...
- Maven使用详解
Maven使用详解 世间万物相生相克,今年本来的目标是主要研究asp.net mvc以及windows平台相关的DI, ORM框架,突然有一天想研究一个Java EE里面相应的框架都是怎么玩的,于是研 ...