随窗体滑动的小插件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中的undefined 与 null 的区别  补充篇
Mar 17 Javascript
javascript 获取所有id中包含某关键字的控件的实现代码
Nov 25 Javascript
jqPlot 基于jquery的画图插件
Apr 26 Javascript
那些年,我还在学习jquery 学习笔记
Mar 05 Javascript
jQuery+slidereveal实现的面板滑动侧边展出效果
Mar 14 Javascript
jQuery 全选 全部选 反选 实现代码
Aug 17 Javascript
vue2 前端搜索实现示例
Feb 26 Javascript
JS实现鼠标拖拽盒子移动及右键点击盒子消失效果示例
Jan 29 Javascript
微信小程序防止多次点击跳转和防止表单组件输入内容多次验证功能(函数防抖)
Sep 19 Javascript
JS实现音乐钢琴特效
Jan 06 Javascript
微信小程序实现下滑到底部自动翻页功能
Mar 07 Javascript
js中复选框的取值及赋值示例详解
Oct 18 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 高手之路(三)
2006/10/09 PHP
微信公众平台网页授权获取用户基本信息中授权回调域名设置的变动
2014/10/21 PHP
php实现将上传word文件转为html的方法
2015/06/03 PHP
JavaScript中URL编码函数代码
2011/01/11 Javascript
ajax页面无刷新 IE下遭遇Ajax缓存导致数据不更新的问题
2012/12/11 Javascript
利用jQuary实现文字浮动提示效果示例代码
2013/12/26 Javascript
使用js完成节点的增删改复制等的操作
2014/01/02 Javascript
JavaScript生成随机数的4种自定义函数分享
2015/02/28 Javascript
javascript闭包的理解
2015/04/01 Javascript
jquery获取复选框checkbox的值的简单实现方法
2016/05/26 Javascript
详解js中常规日期格式处理、月历渲染和倒计时函数
2016/12/28 Javascript
微信小程序 生命周期和页面的生命周期详细介绍
2017/01/19 Javascript
原生js实现验证码功能
2017/03/16 Javascript
xmlplus组件设计系列之路由(ViewStack)(7)
2017/05/02 Javascript
Vue 过滤器filters及基本用法
2017/12/26 Javascript
Vue前后端不同端口的实现方法
2018/09/19 Javascript
JS根据Unix时间戳显示发布时间是多久前【项目实测】
2019/07/10 Javascript
vue日历/日程提醒/html5本地缓存功能
2019/09/02 Javascript
JS图片懒加载技术实现过程解析
2020/07/27 Javascript
python局部赋值的规则
2013/03/07 Python
简单谈谈Python中的闭包
2016/11/30 Python
http请求 request失败自动重新尝试代码示例
2018/01/25 Python
Python 12306抢火车票脚本 Python京东抢手机脚本
2018/02/06 Python
Python使用Matplotlib模块时坐标轴标题中文及各种特殊符号显示方法
2018/05/04 Python
详解Python 正则表达式模块
2018/11/05 Python
Python3.4学习笔记之列表、数组操作示例
2019/03/01 Python
Python类的继承super相关原理解析
2020/10/22 Python
windows下python 3.9 Numpy scipy和matlabplot的安装教程详解
2020/11/28 Python
浅谈pc和移动端的响应式的使用
2019/01/03 HTML / CSS
html5视频常用API接口的实战示例
2020/03/20 HTML / CSS
探索欧洲最好的品牌:Bombinate
2019/06/14 全球购物
元旦晚会邀请函
2014/01/27 职场文书
女儿满月酒致辞
2015/07/29 职场文书
Mysql Online DDL的使用详解
2021/05/20 MySQL
MySQL中连接查询和子查询的问题
2021/09/04 MySQL
nginx常用配置conf的示例代码详解
2022/03/21 Servers