随窗体滑动的小插件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 相关文章推荐
[原创]后缀就扩展名为js的文件是什么文件
Dec 06 Javascript
javascript面向对象的方式实现的弹出层效果代码
Jan 28 Javascript
DIV菜单层实现代码
Nov 19 Javascript
Jquery中删除元素的实现代码
Dec 29 Javascript
jquery在项目中做复选框时遇到的一些问题笔记
Nov 17 Javascript
Extjs的FileUploadField文件上传出现了两个上传按钮
Apr 29 Javascript
JavaScript Math.floor方法(对数值向下取整)
Jan 09 Javascript
javascript学习总结之js使用技巧
Sep 02 Javascript
js代码实现点击按钮出现60秒倒计时
Jan 28 Javascript
JS动态增删表格行的方法
Mar 03 Javascript
JavaScript遍历数组的方法代码实例
Jan 14 Javascript
es6中Promise 对象基本功能与用法实例分析
Feb 23 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的几个常用数字判断函数代码
2012/04/24 PHP
PHP中使用unset销毁变量并内存释放问题
2012/07/05 PHP
php文档工具PHP Documentor安装与使用方法
2016/01/25 PHP
PHP与Ajax相结合实现登录验证小Demo
2016/03/16 PHP
js函数使用技巧之 setTimeout(function(){},0)
2009/02/09 Javascript
关于全局变量和局部变量的那些事
2013/01/11 Javascript
jquery仿京东导航/仿淘宝商城左侧分类导航下拉菜单效果
2013/04/24 Javascript
在JavaScript里嵌入大量字符串常量的实现方法
2013/07/07 Javascript
JavaScript改变HTML元素的样式改变CSS及元素属性
2013/11/12 Javascript
JS记录用户登录次数实现代码
2014/01/15 Javascript
javascript自定义右键弹出菜单实现方法
2015/05/25 Javascript
Javascript将JSON日期格式化
2016/08/23 Javascript
详解Javascript数据类型的转换规则
2016/12/12 Javascript
教你用十行node.js代码读取docx的文本
2017/03/08 Javascript
使用node.js搭建服务器
2017/05/20 Javascript
Vuex 入门教程
2018/01/10 Javascript
JS判断字符串是否为整数的方法--简单的正则判断
2018/07/23 Javascript
如何使用CSS3和JQuery easing 插件制作绚丽菜单
2019/06/18 jQuery
nodejs 递归拷贝、读取目录下所有文件和目录
2019/07/18 NodeJs
python编程开发之类型转换convert实例分析
2015/11/13 Python
python中日志logging模块的性能及多进程详解
2017/07/18 Python
TF-IDF与余弦相似性的应用(一) 自动提取关键词
2017/12/21 Python
Python 窗体(tkinter)按钮 位置实例
2019/06/13 Python
pandas DataFrame创建方法的方式
2019/08/02 Python
Python3 webservice接口测试代码详解
2020/06/23 Python
StubHub希腊:购买体育赛事、音乐会和剧院门票
2019/08/03 全球购物
优秀村官事迹材料
2014/01/10 职场文书
入学生会自荐书范文
2014/02/05 职场文书
国际贸易毕业生自荐书
2014/06/22 职场文书
4s店活动策划方案
2014/08/25 职场文书
保密工作整改情况汇报
2014/11/06 职场文书
高校自主招生教师推荐信
2015/03/23 职场文书
服务员岗位职责范本
2015/04/09 职场文书
2015年重阳节主持词
2015/07/04 职场文书
Java8 Stream API 提供了一种高效且易于使用的处理数据的方式
2022/04/13 Java/Android
springboot读取resources下文件的方式详解
2022/06/21 Java/Android