随窗体滑动的小插件sticky源码


Posted in Javascript onJune 21, 2013
     $.fn.stickyfloat = function(options, lockBottom) {
                var $obj                 = this;
                var parentPaddingTop     = parseInt($obj.parent().css('padding-top'));
                var startOffset         = $obj.parent().offset().top;
                var opts                 = $.extend({ startOffset: startOffset, offsetY: parentPaddingTop, duration: 200, lockBottom:true }, options);                $obj.css({ position: 'absolute' });
                if(opts.lockBottom){
                    var bottomPos = $obj.parent().height() - $obj.height() + parentPaddingTop;
                    if( bottomPos < 0 )
                        bottomPos = 0;
                }
                $(window).scroll(function () {
                    $obj.stop();

                    var pastStartOffset            = $(document).scrollTop() > opts.startOffset;   
                    var objFartherThanTopPos    = $obj.offset().top > startOffset;   
                    var objBiggerThanWindow     = $obj.outerHeight() < $(window).height();   
                    if( (pastStartOffset || objFartherThanTopPos) && objBiggerThanWindow ){
                        var newpos = ($(document).scrollTop() -startOffset + opts.offsetY );
                        if ( newpos > bottomPos )
                            newpos = bottomPos;
                        if ( $(document).scrollTop() < opts.startOffset )
                            newpos = parentPaddingTop;
                        $obj.animate({ top: newpos }, opts.duration );
                    }
                });
            };

使用方法很简单:只要在页面中引入该插件,然后用选择器调用:
$('#menu15').stickyfloat({ duration: 500 });
$('#menu14').stickyfloat({ duration: 500 });
$('#menu13').stickyfloat({ duration: 500 });
$('#menu12').stickyfloat({ duration: 500 });

后面的duration参数表示滑动的速度,越大越慢。

Javascript 相关文章推荐
创建一个复制UBB软件信息的链接或按钮的js代码
Jan 06 Javascript
jquery Moblie入门—hello world的示例代码学习
Jan 08 Javascript
Jquery Uploadify多文件上传带进度条且传递自己的参数
Aug 28 Javascript
JS中typeof与instanceof之间的区别总结
Nov 14 Javascript
JS+CSS简单树形菜单实现方法
Sep 12 Javascript
Position属性之relative用法
Dec 14 Javascript
javascript 内置对象及常见API详细介绍
Nov 01 Javascript
Angular的自定义指令以及实例
Dec 26 Javascript
AngularJS路由切换实现方法分析
Mar 17 Javascript
Vue 单文件中的数据传递示例
Mar 21 Javascript
JS失效 提示HTML1114: (UNICODE 字节顺序标记)的代码页 utf-8 覆盖(META 标记)的冲突的代码页 utf-8
Jun 23 Javascript
浅谈vue单页面中有多个echarts图表时的公用代码写法
Jul 19 Javascript
jquery中文乱码的多种解决方法
Jun 21 #Javascript
js单向链表的具体实现实例
Jun 21 #Javascript
javascript setTimeout和setInterval计时的区别详解
Jun 21 #Javascript
js简易namespace管理器 实例代码
Jun 21 #Javascript
JavaScript中的this关键字介绍与使用实例
Jun 21 #Javascript
js验证模型自我实现的具体方法
Jun 21 #Javascript
JS验证控制输入中英文字节长度(input、textarea等)具体实例
Jun 21 #Javascript
You might like
FirePHP 推荐一款PHP调试工具
2011/04/23 PHP
php判断上传的Excel文件中是否有图片及PHPExcel库认识
2013/01/11 PHP
PHP文件锁函数flock()详细介绍
2014/11/18 PHP
PHP实现用户登录的案例代码
2018/05/10 PHP
ext实现完整的登录代码
2008/08/08 Javascript
用 Javascript 验证表单(form)中的单选(radio)值
2009/09/08 Javascript
javascript学习笔记(十六) 系统对话框(alert、confirm、prompt)
2012/06/20 Javascript
js动态修改整个页面样式达到换肤效果
2014/05/23 Javascript
Node.js中安全调用系统命令的方法(避免注入安全漏洞)
2014/12/05 Javascript
Nodejs中的this详解
2016/03/26 NodeJs
深入剖析JavaScript:Object类型
2016/05/10 Javascript
Servlet实现文件上传,可多文件上传示例
2016/12/05 Javascript
JavaScript BASE64算法实现(完美解决中文乱码)
2017/01/10 Javascript
Vue指令的钩子函数使用方法
2017/03/20 Javascript
VUE axios发送跨域请求需要注意的问题
2017/07/06 Javascript
vue better scroll 无法滚动的解决方法
2018/06/07 Javascript
webpack手动配置React开发环境的步骤
2018/07/02 Javascript
vue+vue-router转场动画的实例代码
2018/09/01 Javascript
vue-cli监听组件加载完成的方法
2018/09/07 Javascript
angular6 填坑之sdk的方法
2018/12/27 Javascript
[01:02:04]EG vs Liquid 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.23
2019/09/05 DOTA
python实现DNS正向查询、反向查询的例子
2014/04/25 Python
python中字符串的操作方法大全
2018/06/03 Python
浅谈Python采集网页时正则表达式匹配换行符的问题
2018/12/20 Python
python3常用的数据清洗方法(小结)
2019/10/31 Python
瑞士灯具购物网站:Lampenwelt.ch
2018/07/08 全球购物
俄罗斯设计师家具购物网站:The Furnish
2019/12/01 全球购物
Michael Kors澳大利亚官网:世界知名的奢侈饰品和成衣设计师
2020/02/13 全球购物
运动会表扬稿大全
2014/01/16 职场文书
青年文明号事迹材料
2014/01/18 职场文书
亲子运动会的活动方案
2014/08/17 职场文书
个人违纪检讨书
2014/09/15 职场文书
财务经理岗位职责范本
2015/04/08 职场文书
生日宴会家属答谢词
2015/09/29 职场文书
小学教师暑期培训心得体会
2016/01/09 职场文书
win10截图快捷键win+shift+s没有反应无法截图怎么解决?
2022/08/14 数码科技