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
github地址

在线实例

实例预览 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	不支持旧的浏览器。

下载

转载于:https://www.cnblogs.com/niuboren/p/5858675.html

jQuery Portamento 滑动定位相关推荐

Android悬浮按钮锚点位置,Android 滑动定位+吸附悬停效果实现
在前两篇文章中,分别介绍了tablayout+scrollview 和 tablayout+recyclerview 实现的滑动定位的功能,文章链接: Android 实现锚点定位 Android t ...
android实现3种定位的切换,Android 滑动定位+吸附悬停效果实现
在前两篇文章中,分别介绍了tablayout+scrollview 和 tablayout+recyclerview 实现的滑动定位的功能,文章链接: Android 实现锚点定位 Android t ...
CSS+jQuery实现滑动幻灯片实例详解
HTML部分代码 Start with having a wrapping container div called main_view , and two sections nested insid ...
php 滑动图片,JQuery图片滑动
简明现代魔法 -> JQuery -> JQuery图片滑动 JQuery图片滑动 2009-10-03 效果演示 CSS代码 * { padding: 0; margin: 0; out ...
记一次失败的RecycleView滑动定位
作者:点先生, 时间:2018.11.26 前段时间开的新项目,现在终于开始动工了,我和另一个小伙伴一起做,由于他还在处理另一个项目的尾巴,所以前期只有我一个人来做.之后我也会围绕着这个项目来讲一些我 ...
jquery实现滑动滚动条出现对联广告
jquery实现滑动滚动条出现对联广告在很多网站都又滑动滚动条到一定位置,然后就出现对联广告的应用.今天我也学习了一个对联广告分享给大家效果图入下: 主要实现是用Jquery里面的scroll()去 ...
jquery实现滑动标尺
jquery实现滑动标尺## 发布时间: 2018-08-28 15:54:00 显示标尺,移动标尺下的三角形 html <div id="nearFarView">& ...
JQuery图片滑动制作软件软件软件软件
jQuery幻灯,免费jquery和js幻灯片相册制作软件,jquery滑动效果,JQuery图片滑动般地在首页或者一些重要的页面放上一个幻灯片,用来展示图片,突出重点,不仅美观大方,而且用户看了之 ...
jQuery实现锚点滑动定位
go=function(index){ var top = $('#caseNewGuide' + index).offset().top; $('html, body').animate({ scr ...