• 版本：
  • 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. AngularJs单元测试

    这篇文章主要介绍了angularJS中的单元测试实例,本文主要介绍利用Karma和Jasmine来进行ng模块的单元测试,并用Istanbul  来生成代码覆盖率测试报告,需要的朋友们可以参考下,以下 ...

  2. LeetCode:Ransom Note_383

    LeetCode:Ransom Note [问题再现] Given
 an 
arbitrary
 ransom
 note
 string 
and 
another 
string 
contai ...

  3. Testing - 测试基础 - 理解

    理解 目的 测试就是要找到关键信息,有关项目和产品的关键决策都是根据这些信息做出. 对产品质量做出总体评估. 找出并报告团队所有可能会对产品价值产生消极影响的问题(但并不意味着能发现所有问题). 重心 ...

  4. 【小型系统】抽奖系统-使用Java Swing完成

    一.需求分析 1. 显示候选人照片和姓名. 2. 可以使用多种模式进行抽奖,包括一人单独抽奖.两人同时抽奖.三人同时抽奖. 3. 一个人可以在不同的批次的抽奖中获取一.二.三等奖,但是不能在同一批次抽 ...

  5. C#实现通用数据过滤窗体

    最近一直在做WINFORM项目,所以经常有些新的想法或尝试与大家分享,之前与大家分享了通用窗体遮罩层.通用可附加数据绑定的DataGridView.窗体渐显,今天来分享一个大家在其它软件中常见的功能: ...

  6. Java魔法堂：四种引用类型、ReferenceQueue和WeakHashMap

    一.前言 JDK1.2以前只提供一种引用类型——强引用 Object obj = new Object(); .而JDK1.2后我们多另外的三个选择分别是软引用 java.lang.ref.SoftR ...

  7. 《ASP.NET SignalR系列》第三课 SignalR的支持平台

    从现在开始相关文章请到: http://lko2o.com/moon 接着第二课:<ASP.NET SignalR系列>第二课 SignalR的使用说明 一.服务器系统要求 SignalR ...

  8. IOS高级编程之三：IOS 多线程编程

    多线程的概念在各个操作系统上都会接触到,windows.Linux.mac os等等这些常用的操作系统,都支持多线程的概念. 当然ios中也不例外,但是线程的运行节点可能是我们平常不太注意的. 例如: ...

  9. 『给它加个壳』纯MarkDown博客阅读体验优化

    今天鼓捣了一天纯MarkDown书写的博客样式的美化,事实证明图表较多的MarkDown撰写的博文一样可以展现出非常漂亮的效果.为了让纯MarkDown书写的博客有一个干净舒服的阅读体验,我主要针对博 ...

  10. Web API 自动生成帮助文档并使用Web API Test Client 测试

    之前在项目中有用到webapi对外提供接口,发现在项目中有根据webapi的方法和注释自动生成帮助文档,还可以测试webapi方法,功能很是强大,现拿出来与大家分享一下. 先看一下生成的webapi文 ...