随窗体滑动的小插件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 相关文章推荐
List the Codec Files on a Computer
Jun 11 Javascript
基于jquery的仿百度搜索框效果代码
Apr 11 Javascript
jquery中ajax函数执行顺序问题之如何设置同步
Feb 28 Javascript
extjs_02_grid显示本地数据、显示跨域数据
Jun 23 Javascript
AngularJS + Node.js + MongoDB开发的基于高德地图位置的通讯录
Jan 02 Javascript
JS模仿手机端九宫格登录功能实现代码
Apr 28 Javascript
详解JavaScript中this关键字的用法
May 26 Javascript
详解微信小程序开发之——wx.showToast(OBJECT)的使用
Jan 18 Javascript
node.js express中app.param的用法详解
Jul 16 Javascript
jQuery实现腾讯信用界面(自制刻度尺)样式
Aug 15 jQuery
深入剖析Express cookie-parser中间件实现示例
Feb 01 Javascript
Vue.js 实现数据展示全部和收起功能
Sep 05 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
Linux下PHP安装mcrypt扩展模块笔记
2014/09/10 PHP
Ext 表单布局实例代码
2009/04/30 Javascript
CodeMirror2 IE7/IE8 下面未知运行时错误的解决方法
2012/03/29 Javascript
Javascript实现动态菜单添加的实例代码
2013/07/05 Javascript
对于Form表单reset方法的新认识
2014/03/05 Javascript
整理Javascript流程控制语句学习笔记
2015/11/29 Javascript
实例详解jQuery表单验证插件validate
2016/01/18 Javascript
Bootstrap中的Panel和Table全面解析
2016/06/13 Javascript
Vue声明式渲染详解
2017/05/17 Javascript
jQuery用户头像裁剪插件cropbox.js使用详解
2017/06/07 jQuery
JavaScript基于activexobject连接远程数据库SQL Server 2014的方法
2017/07/12 Javascript
Vue中render函数的使用方法
2018/01/31 Javascript
JS中判断某个字符串是否包含另一个字符串的五种方法
2018/05/03 Javascript
jQuery实现基本隐藏与显示效果的方法详解
2018/09/05 jQuery
[02:55]DOTA2英雄基础教程 发条技师
2013/12/04 DOTA
Python中的tuple元组详细介绍
2015/02/02 Python
Python将多个excel表格合并为一个表格
2021/02/22 Python
python matplotlib 在指定的两个点之间连线方法
2018/05/25 Python
基于python中theano库的线性回归
2018/08/31 Python
python读取并写入mat文件的方法
2019/07/12 Python
图解python全局变量与局部变量相关知识
2019/11/02 Python
如何将你的应用迁移到Python3的三个步骤
2019/12/22 Python
解决Tensorflow占用GPU显存问题
2020/02/03 Python
python BeautifulSoup库的安装与使用
2020/12/17 Python
html Table 表头固定的实现
2019/01/22 HTML / CSS
2013的个人自我评价
2013/12/26 职场文书
餐饮业创业计划书范文
2014/01/06 职场文书
驾驶员岗位职责
2014/01/29 职场文书
大学生军训自我鉴定
2014/02/12 职场文书
人力资源部经理助理岗位职责
2014/03/04 职场文书
迎新晚会主持词
2014/03/24 职场文书
大学生演讲稿
2014/04/25 职场文书
十八大演讲稿
2014/05/22 职场文书
运动会搞笑广播稿
2014/10/14 职场文书
消防隐患整改通知书
2015/04/22 职场文书
2016国庆节67周年寄语
2015/12/07 职场文书