随窗体滑动的小插件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 对象的创建与使用
Mar 09 Javascript
js滚动条回到顶部的代码
Dec 06 Javascript
jquery如何把参数列严格转换成数组实现思路
Apr 01 Javascript
Javascript学习笔记之函数篇(四):arguments 对象
Nov 23 Javascript
jQuery常见的选择器及用法介绍
Dec 20 Javascript
JS使用插件cryptojs进行加密解密数据实例
May 11 Javascript
详解webpack2+node+react+babel实现热加载(hmr)
Aug 24 Javascript
AngularJS动态添加数据并删除的实例
Feb 27 Javascript
layui表格checkbox选择全选样式及功能的实例
Mar 07 Javascript
js实现动态添加上传文件页面
Oct 22 Javascript
js数组去重的方法总结
Jan 18 Javascript
vue实现日历表格(element-ui)
Sep 24 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
smarty静态实验表明,网络上是错的~呵呵
2006/11/25 PHP
解析PHP自带的进位制之间的转换函数
2013/06/08 PHP
Laravel5.* 打印出执行的sql语句的方法
2017/07/24 PHP
PHP中危险的file_put_contents函数详解
2017/11/04 PHP
PHP从零开始打造自己的MVC框架之类的自动加载实现方法详解
2019/06/03 PHP
浅谈Javascript面向对象编程
2011/11/15 Javascript
Javascript中valueOf与toString区别浅析
2013/03/19 Javascript
自动刷新网页,自动刷新当前页面,JS调用
2013/06/24 Javascript
全面解析Bootstrap中transition、affix的使用方法
2016/05/30 Javascript
在js代码拼接dom对象到页面上去的模板总结(必看)
2017/02/14 Javascript
NodeJS学习笔记之Module的简介
2017/03/24 NodeJs
JS分页的实现(同步与异步)
2017/09/16 Javascript
详解webpack编译多页面vue项目的配置问题
2017/12/11 Javascript
Vue的路由动态重定向和导航守卫实例
2018/03/17 Javascript
微信小程序实现topBar底部选择栏效果
2018/07/20 Javascript
javascript如何实现create方法
2019/11/04 Javascript
three.js 将图片马赛克化的示例代码
2020/07/31 Javascript
[06:44]2018DOTA2亚洲邀请赛4.5 SOLO赛 MidOne vs Sumail
2018/04/06 DOTA
浅谈Tensorflow由于版本问题出现的几种错误及解决方法
2018/06/13 Python
Python机器学习k-近邻算法(K Nearest Neighbor)实例详解
2018/06/25 Python
python实现AES加密解密
2019/03/28 Python
windows10下安装TensorFlow Object Detection API的步骤
2019/06/13 Python
x-ua-compatible content=”IE=7, IE=9″意思理解
2013/07/22 HTML / CSS
HTML5 HTMLCollection和NodeList的区别详解
2020/04/29 HTML / CSS
video下autoplay属性无效的解决方法(添加muted属性)
2020/05/19 HTML / CSS
阿里健康大药房:阿里自营网上药店
2017/08/01 全球购物
澳大利亚在线性感内衣商店:Fantasy Lingerie
2021/02/07 全球购物
中科软笔试题和面试题
2014/10/07 面试题
广州足迹信息技术有限公司Java软件工程师试题
2014/02/15 面试题
公立医院改革实施方案
2014/03/14 职场文书
中等生评语大全
2014/05/04 职场文书
2015年商场工作总结
2015/04/27 职场文书
听证会主持词
2015/07/03 职场文书
家庭聚会祝酒词
2015/08/11 职场文书
数学复习课教学反思
2016/02/18 职场文书
中国现代文学之经典散文三篇
2019/09/18 职场文书