随窗体滑动的小插件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 相关文章推荐
Javascript 设计模式(二) 闭包
May 26 Javascript
jQuery把表单元素变为json对象
Nov 06 Javascript
实现网页页面跳转的几种方法(meta标签、js实现、php实现)
May 20 Javascript
原生javascript实现的分页插件pagenav
Aug 28 Javascript
JavaScript jquery及AJAX小结
Jan 24 Javascript
JS工作中的小贴士之”闭包“与事件委托的”阻止冒泡“
Jun 16 Javascript
js闭包用法实例详解
Dec 13 Javascript
vue cli构建的项目中请求代理与项目打包问题
Feb 26 Javascript
vue2.0 自定义组件的方法(vue组件的封装)
Jun 05 Javascript
详解如何使用微信小程序云函数发送短信验证码
Mar 13 Javascript
angular多语言配置详解
May 16 Javascript
使用layer弹窗,制作编辑User信息页面的方法
Sep 27 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
用PHP的ob_start();控制您的浏览器cache!
2007/02/14 PHP
php生成与读取excel文件
2016/10/14 PHP
ThinkPHP防止重复提交表单的方法实例分析
2018/05/10 PHP
PHP getName()函数讲解
2019/02/03 PHP
javascript 多种搜索引擎集成的页面实现代码
2010/01/02 Javascript
为jQuery.Treeview添加右键菜单的实现代码
2010/10/22 Javascript
JavaScript去掉数组中的重复元素
2011/01/13 Javascript
JQuery扩展插件Validate 1 基本使用方法并打包下载
2011/09/05 Javascript
开发插件的两个方法jquery.fn.extend与jquery.extend
2013/11/21 Javascript
利用JS来控制键盘的上下左右键(示例代码)
2013/12/14 Javascript
JS动态添加Table的TR,TD实现方法
2015/01/28 Javascript
详解Node.js中exports和module.exports的区别
2017/04/19 Javascript
vue-cli2.x项目优化之引入本地静态库文件的方法
2018/06/19 Javascript
vue v-model动态生成详解
2018/06/30 Javascript
微信小程序实现的日期午别医生排班表功能示例
2019/01/09 Javascript
js中null与空字符串&quot;&quot;的区别讲解
2019/01/17 Javascript
vue.js中导出Excel表格的案例分析
2019/06/11 Javascript
Python def函数的定义、使用及参数传递实现代码
2014/08/10 Python
解决python中使用plot画图,图不显示的问题
2018/07/04 Python
python修改字典键(key)的方法
2019/08/05 Python
浅析Python+OpenCV使用摄像头追踪人脸面部血液变化实现脉搏评估
2019/10/17 Python
使用Python进行中文繁简转换的实现代码
2019/10/18 Python
Django choices下拉列表绑定实例
2020/03/13 Python
python 实现ping测试延迟的两种方法
2020/12/10 Python
基于css3的属性transition制作菜单导航效果
2015/09/01 HTML / CSS
html5-Canvas可以在web中绘制各种图形
2012/12/26 HTML / CSS
伦敦的高级牛仔布专家:Trilogy
2018/08/06 全球购物
师范学院毕业生求职信范文
2013/12/26 职场文书
结婚喜宴家长答谢词
2014/01/15 职场文书
大三毕业自我鉴定
2014/01/15 职场文书
开学典礼感言
2014/02/16 职场文书
2014年党员评议表自我评价
2014/09/27 职场文书
工地材料员岗位职责
2015/04/11 职场文书
电影复兴之路观后感
2015/06/02 职场文书
Html分层的box-shadow效果的示例代码
2021/03/30 HTML / CSS
python opencv将多个图放在一个窗口的实例详解
2022/02/28 Python