$.fn.smartFloat = function() {
    var position = function(element) {
        var top = element.position().top, pos = element.css("position");
        $(window).scroll(function() {
            var scrolls = $(this).scrollTop();
            if (scrolls > top) {
                if (window.XMLHttpRequest) {
                    element.css({
                        position: "fixed",
                        top: 0
                    });    
                } else {
                    element.css({
                        top: scrolls
                    });    
                }
            }else {
                element.css({
                    position: "absolute",
                    top: top
                });    
            }
        });
    };
    return $(this).each(function() {
        position($(this));                         
    });
};
//使用:
//$("#nav_left_layout").smartFloat();

smartFloat的更多相关文章

  1. 固定浮动侧边栏(SmartFloat)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. jquery插件学习之元素顶部悬浮

    jquery插件的学习: HTML部分及应用 <!DOCTYPE html> <html> <head> <meta charset="utf-8& ...

  3. JS学习知我见(常用建站代码)

    <!doctype html><html><head><meta charset="utf-8"><meta name=&qu ...

  4. AngularJS开发指南6:AngularJS表单详解

    表单控件(input, select, textarea )是用来获取用户输入的.表单则是一组有联系的表单控件的集合. 用户能通过表单和表单控件提供验证的服务,知道自己的输入是否合法.这样能让用户交互 ...

  5. JS-JQ实现页面滚动时元素智能定位(顶部-其他部位)

      先看效果:     阅读前提:充分理解div的三种定位方式:浮动,相对定位,绝对定位 方法一(顶部)      原理:直接使用css 进行控制:缺点:不兼容ie6-:      实现:positi ...

  6. Angularjs之表单实例(三)

    正确引用js css文件后可运行 <!DOCTYPE html> <html ng-app='myApp'> <head> <title>Bootstr ...

  7. AngularJs学习笔记--Forms

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/forms 控件(input.select.textarea)是用户输入数据的一种方式.Form(表单) ...

  8. JS仿淘宝详情页菜单条智能定位效果

    类似于淘宝详情页菜单条智能定位 对于每个人来说并不陌生!如下截图所示:红色框的那部分! 基本原理: 是用JS侦听滚动事件,当页面的滚动距离(页面滚动的高度)大于或者等于 "对象"( ...

  9. jQuery实现页面元素智能定位

    实现过程 Js侦听滚动事件,当页面滚动的距离(页面滚动的高度)超出了对象(要滚动的层)距离页面顶部的高度,即要滚动的层到达了浏览器窗口上边缘时,立即将对象定位属性position值改成fixed(固定 ...

随机推荐

  1. 【MySQL】解决You can't specify target table 'user_cut_record_0413' for update in FROM clause

    问题 You can't specify target table 'user_cut_record_0413' for update in FROM clause 原因 待更新/删除的数据集与查询的 ...

  2. hdu 3555 Bomb ( 数位DP)

    Bomb Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 131072/65536 K (Java/Others) Total Subm ...

  3. 每天一个linux命令(10):cat

    1.命令简介 cat (concatenate,连接)命令将[文件]或标准输入组合输出到标准输出,如果没有指定文件,或者文件为"-",则从标准输入读取. 2.用法 cat [选项] ...

  4. UESTC 1034 AC Milan VS Juventus 分情况讨论

    AC Milan VS Juventus Time Limit: 3000/1000MS (Java/Others)     Memory Limit: 65535/65535KB (Java/Oth ...

  5. MacOS下保护浏览器主页和默认搜索

    Windows流氓软件已被中国人玩烂了, 终于连Mac也被沦陷. 视频演示地址: http://v.youku.com/v_show/id_XMTMwMTk4MzQ0MA==.html

  6. 从yield 到yield from再到python协程

    yield 关键字 def fib(): a, b = 0, 1 while 1: yield b a, b = b, a+b yield 是在:PEP 255 -- Simple Generator ...

  7. MySQL主从复制作用和原理

    一.什么是主从复制?主从复制,是用来建立一个和主数据库完全一样的数据库环境,称为从数据库:主数据库一般是准实时的业务数据库. 二.主从复制的作用1.做数据的热备,作为后备数据库,主数据库服务器故障后, ...

  8. SudaMod-81.0 / crDroidAndroid-8.1(android-8.1.0_r20)红米3 2018年5月3日更新

    一.写在前面 我只是个人爱好,本ROM未集成任何第三方推广软件,我只是喜欢把好的资源分享出来,若可以,我们一起学习,一起进步. 请不要问我怎么刷机! 请不要问我玩游戏卡不卡(有钱你就换好点的手机)! ...

  9. gsoap内存管理与释放

    (一)gSoap客户端调用WebService完成后注意内存释放顺序 //Soap资源清理 soap_destroy(soap_sp.get()); //清理反序列化的类实例 soap_end(soa ...

  10. Maven-设置默认Java编译版本

    有两种方式,一种针对项目,一种针对全局 针对项目,需要在pom.xml中添加如下配置: <build> <plugins> <plugin> <groupId ...