• 版本：
  • 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

  • github地址

在线实例

实例预览 no limit 基础示例

实例预览 No workaround 不支持旧的浏览器

实例预览 Bigger gap 设置边距

实例预览 Absolute with bottom limit 在绝对定位布局中设置父容器

实例预览 Floated with bottom limit 在浮动布局中设置父容器

使用方法

载入 JavaScript 文件

  1. <script src="jquery.js"></script> 
  2. <script src="jquery.portamento.js"></script> 
复制

CSS 样式

  1. /* 默认时的样式 */ 
  2. #sidebar{} 
  3.  
  4. /* 加载 Portamento 成功后的样式 */ 
  5. #portamento_container{position:relative;z-index:99;} 
  6. #portamento_container #sidebar{} 
  7.  
  8. /* 滑动时的样式 */ 
  9. #portamento_container #sidebar.fixed{position:fixed;} 
复制

DOM 结构

  1. <body> 
  2.   <div>正常布局或内容</div> 
  3.   <div id="sidebar">要滑动定位的元素</div> 
  4. </body> 
复制

调用 Portamento

  1. $('#sidebar').portamento({ 
  2.   gap: 0, 
  3.   disableWorkaround: true 
  4. }); 
复制

参数说明

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

jQuery Portamento 滑动定位的更多相关文章

  1. 基于jQuery左右滑动切换特效 附源码

    分享一款基于脚jQuery左右滑动切换特效.这是一款鼠标点击左右箭头按钮图片滚动切换,鼠标移到图片上显示透明边框特效.   效果图如下:   废话不多说,代码奉上!   html代码: <div ...

  2. jquery左右滑动效果的实现

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. jQuery 效果 —— 滑动

    jQuery 效果 -- 滑动 1.向下滑动元素 (1)使用slideDown()方法可以用于向下滑动元素 $("button").click(function(){ $(&quo ...

  4. 全新jquery多点滑动幻灯片——全屏动画animateSlide

    首页banner的酷炫效果多来自全屏大图的幻灯片动画,下面提供一种完美兼容的jquery动画特效:全新jquery多点滑动幻灯片——全屏动画animateSlide(代码完全原创). 直接上代码,把h ...

  5. 19个非常有用的 jQuery 图片滑动插件和教程

    jQuery 是一个非常优秀的 Javascript 框架,使用简单灵活,同时还有许多成熟的插件可供选择.其中,最令人印象深刻的应用之一就是对图片的处理,它可以让帮助你在你的项目中加入精美的效果.今天 ...

  6. 20 个非常棒的jQuery内容滑动插件

    Wow Slider  WOW Slider是一款小巧易用的网页滑块设计.该软件内置大量的模版和工具,让你轻松设计出完美的视觉效果.他还可以帮助用户在短时间内创造出梦幻般的滑块,而无需编码和图像编辑, ...

  7. Android 滑动定位+吸附悬停效果实现

    在前两篇文章中,分别介绍了tablayout+scrollview 和 tablayout+recyclerview 实现的滑动定位的功能,文章链接: Android 实现锚点定位 Android t ...

  8. 基于jQuery左右滑动切换特效

    分享一款基于脚jQuery左右滑动切换特效.这是一款鼠标点击左右箭头按钮图片滚动切换,鼠标移到图片上显示透明边框特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div ...

  9. 基于jQuery左右滑动切换图片代码

    分享一款基于jQuery左右滑动切换图片代码.这是一款基于jQuery实现的左右滑动切换焦点图代码.效果图如下: 在线预览   源码下载 实现的代码: <div class="v_ou ...

随机推荐

  1. <C#>找出数组中重复次数最多的数值

    给定一个int数组,里面存在重复的数值,如何找到重复次数最多的数值呢? 这是在某社区上有人提出的问题,我想到的解决方法是分组. 1.先对数组中的所有元素进行分组,那么,重复的数值肯定会被放到一组中: ...

  2. Ubuntu 14.04上安装caffe

    本来实在windows 10上尝试安装caffe,装了一天没装上,放弃; 改在windows上装ubuntu的双系统,装了一个下午,不小心windows的系统盘被锁死了,也不会unlock?只好含泪卸 ...

  3. JAVA设计模式《一》

    设计模式(Design pattern)是一套被反复使用.多数人知晓的.经过分类编目的.代码设计经验的总结.使用设计模式是为了可重用代码.让代码更容易被他人理解.保证代码可靠性. 毫无疑问,设计模式于 ...

  4. Android之自动文本输入识别提示

    相信大家都熟悉自动识别提示吧,在我们的生活中随处可见,今天就让我为大家简单介绍一下它是如何设计的. 所谓自动识别输入即是根据用户输入的已有信息,为用户提示可能的值,方便用户完成输入.在Android设 ...

  5. Java多线程系列--“JUC线程池”05之 线程池原理(四)

    概要 本章介绍线程池的拒绝策略.内容包括:拒绝策略介绍拒绝策略对比和示例 转载请注明出处:http://www.cnblogs.com/skywang12345/p/3512947.html 拒绝策略 ...

  6. [c++] Associative Containers

    关联容器 和 顺序容器 的本质差别在于: 关联容器通过键(key)存储和读取元素,而顺序容器则通过元素在容器中的位置顺序存储和访问元素. Reference: http://www.cnblogs.c ...

  7. 牛顿法与拟牛顿法学习笔记（五）L-BFGS 算法

    机器学习算法中经常碰到非线性优化问题,如 Sparse Filtering 算法,其主要工作在于求解一个非线性极小化问题.在具体实现中,大多调用的是成熟的软件包做支撑,其中最常用的一个算法是 L-BF ...

  8. Web 前端开发精华文章集锦（jQuery、HTML5、CSS3）【系列十九】

    <Web 前端开发精华文章推荐>2013年第七期(总第十九期)和大家见面了.梦想天空博客关注 前端开发 技术,分享各种增强网站用户体验的 jQuery 插件,展示前沿的 HTML5 和 C ...

  9. 使用AndroidStudio报错：INSTALL_FAILED_UPDATE_INCOMPATIBLE

    安装Android Studio后,用真机调试运行项目时出现:INSTALL_FAILED_UPDATE_INCOMPATIBLE这个错误 原因: 1. 可能是设备内存不足: 2. APP已经存在: ...

  10. Maven使用详解

    Maven使用详解 世间万物相生相克,今年本来的目标是主要研究asp.net mvc以及windows平台相关的DI, ORM框架,突然有一天想研究一个Java EE里面相应的框架都是怎么玩的,于是研 ...