jquery插件的学习：

HTML部分及应用

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title></title>

    <style>

        #float{border: 1px solid #e0e0e0; padding: 10px; position: absolute; width: 170px;}

    </style>

    <script src="js/jquery-1.11.1.min.js"></script>

    <script src="js/smartFloat.js"></script>

    <script>

        $(function(){

            //插件应用

            $("#float").smartFloat({width:"1024px"});//top:原始高度，pos:position的类型,width:到达顶部后的宽度，oWidth:最初的宽度

        });

    </script>

</head>

<body>

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

<div id="float">我到了顶部就悬浮</div>

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

</body>

</html>

js部分

/**

 * Created by Administrator on 14-9-3.

 */

;(function($){

    $.fn.extend({

        smartFloat:function(options){

            var defaults = {

                top:$(this).position().top,//原始高度

                pos:$(this).css("position"),//原始的postion类型

                width:"100%", //到达顶部后的宽度

                oWidth:$(this).width()//最初的宽度

            };

            var options = $.extend(defaults,options);

            var obj = $(this);

            $(window).scroll(function(){

                var scrolls = $(this).scrollTop();

                if(scrolls > options.top){

                    if(window.navigator.userAgent.indexOf('MSIE 6.0')!=-1){

                        obj.css({top:scrolls});

                    }else{

                        obj.css({

                            position: "fixed",

                            top: 0

                        });

                        obj.stop().animate({width:options.width});

                    }

                }else{

                    obj.css({

                        top:options.top,

                        position:""

                    });

                    obj.stop().animate({width:options.oWidth});

                }

            });

        }

    });

})(jQuery);

jquery插件学习之元素顶部悬浮的更多相关文章

  1. Jquery插件学习

    前端开发也工作了一段时间,Jquery代码页写了很多,但是都是些的很零散的,不是很好用,网上看了很多人写的Jquery 很好用,而且到每个项目中都可以使用, 本人就感觉很好奇他们是怎么做到的呢,于是自 ...

  2. jQuery插件学习(一)

    由于项目开发需要,经常会用到一些jquery插件,但网上已有的插件常常又不能100%满足业务需求,所以就想自己能看懂插件的代码,进行一些功能上的改动和补充,或者能自己自定义插件就更好了.所以这段时间会 ...

  3. jQuery插件学习笔记

    近期在研究jQuery插件,插件编写的目的是给已经有的一系列方法或函数做一个封装,以便在其它地方反复使用,方便后期维护. JQuery除了提供一个简单.有效的方式进行管理元素以及脚本,它还还提供了例外 ...

  4. JQUERY插件学习之jQuery UI

    jQuery UI:http://jqueryui.com/ jQuery UI介绍: jQuery UI 是以 jQuery 为基础的开源 JavaScript 网页用户界面代码库.包含底层用户交互 ...

  5. jquery插件 - 学习笔记 （插件参数及函数的调用）

    今天研究的是jquery插件的基本写法: 比如我打算写一个名为 ImageZoom 的插件 前台调用: <script src="ImageZoom.js"></ ...

  6. jquery插件——检测DOM元素是否在浏览器可视范围之内

    引言 web应用中有很多地方会用到打点,用来检测用户行为,今天就做了个打点相关的需求,为了统计一个广告给用户的展示次数,每次用户请求完成并且渲染完成之后就算一次成功的展示,其实有时候这个广告还没有在用 ...

  7. [置顶] JQuery插件学习教程

    这是JQuery其它常用插件的视频教程,包括validate插件,.comet插件等.同时有大量实例项目,如果你是喜欢JQuery的童鞋千万不要错过. 教程的内容有: 1_validate插件(1) ...

  8. jquery 插件学习

    练习jquery上的一个插件编写 1.标准的3个基本内容,根目录里面创建2个文件夹(存放css和js)和1个html页面文件: 2.测试的主html页面代码 <!DOCTYPE html> ...

  9. jQuery插件学习基础

    1.给jQuery添加全局的函数: $.zgz={  fn1:function(){ alert('我是刚设置的第一个全局函数') },fn2:function(){ alert('我是刚设置的第二个 ...

随机推荐

  1. [Python] 学习笔记之MySQL数据库操作

    1 Python标准数据库接口DB-API介绍 Python标准数据库接口为 Python DB-API,它为开发人员提供了数据库应用编程接口.Python DB-API支持很多种的数据库,你可以选择 ...

  2. 【Android开发实践】android.view.InflateException: Binary XML file line #12: Error inflating class fragment问题解决

    一般出现的原因是fragment引入的包错了,应该是import android.app.ListFragment;而不是import android.support.v4.app.ListFragm ...

  3. Android 组件和进程的一些关系

    1.Service 如果没有单独指定线程的话,那么和主activity是在同一个线程的,就是主线程,那么也不能够在这个service中做耗时操作,否则一定会中断退出. 2.默认情况下,一个Androi ...

  4. hihoCoder 1196 高斯消元·二

    Description 一个黑白网格,点一次会改变这个以及与其连通的其他方格的颜色,求最少点击次数使得所有全部变成黑色. Sol 高斯消元解异或方程组. 先建立一个方程组. \(x_i\) 表示这个点 ...

  5. ubuntu15.10安装搜狗拼音输入法

    sudo vim /etc/apt/sources.list.d/ubuntukylin.list(我的默认显示没有这个文件将自动创建) 添加源deb http://archive.ubuntukyl ...

  6. mysql连结查询

    2016年4月13日 18:08:22 星期三 union 会生成临时表, 然后一同取出合并 join 或子查询, 会生成临时表进行嵌套循环 临时表, 缺点就是没有索引

  7. C#动态创建和动态使用程序集、类、方法、字段等

    C#动态创建和动态使用程序集.类.方法.字段等 分类:技术交流 (3204)  (3)   首先需要知道动态创建这些类型是使用的一些什么技术呢?其实只要相关动态加载程序集呀,类呀,都是使用反射,那么动 ...

  8. Bootstrap3 CSS样式基本用法总结

    按钮 a,input,button都可以设置为按钮 a标签按钮   button标签按钮 <a class="btn btn-default" href="#&qu ...

  9. Python 开发轻量级爬虫07

    Python 开发轻量级爬虫 (imooc总结07--网页解析器BeautifulSoup) BeautifulSoup下载和安装 使用pip install 安装:在命令行cmd之后输入,pip i ...

  10. 在db2数据库上模拟死锁场景 还是z上的

    如果条件允许,起两个线程互相抢资源就行了,但问题是,时间上还需要同步,要做到完美控制,还得加其他逻辑,忒费事,所以可以用下面的办法: 在目标表上直接加个锁……简单,粗暴,直接……很好…… LOCK T ...