$.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. [Vuex] Split Vuex Store into Modules using TypeScript

    When the Vuex store grows, it can have many mutations, actions and getters, belonging to different c ...

  2. The module is an Android project without build variants, and cannot be built

    导入 安卓项目报错 Error:The module 'app' is an Android project without build variants, and cannot be built. ...

  3. [转]Kqueue与epoll机制

    首先介绍阻塞与非阻塞:阻塞是个什么概念呢?比如某个时候你在等快递,但是你不知道快递什么时候过来,而且你没有别的事可以干(或者说接下来的事要等快递来了才能做):那么你可以去睡觉了,因为你知道快递把货送来 ...

  4. [AS3 3D Demo] Stage3D学习过程中开发的3个Demo

    1.飞机大战 基于Starling开发,使用了对象池技术的Demo. 2.3D人物2D背景游戏Demo 基于Away3D开发,实现了3D资源管理.寻路和跳跃等功能. 3.全3D游戏Demo 基于Awa ...

  5. pandas DataFrame apply()函数(1)

    之前已经写过pandas DataFrame applymap()函数 还有pandas数组(pandas Series)-(5)apply方法自定义函数 pandas DataFrame 的 app ...

  6. 学习笔记:The Log(我所读过的最好的一篇分布式技术文章)

    前言 这是一篇学习笔记. 学习的材料来自Jay Kreps的一篇讲Log的博文. 原文非常长.可是我坚持看完了,收获颇多,也深深为Jay哥的技术能力.架构能力和对于分布式系统的理解之深刻所折服.同一时 ...

  7. Maven知识总结(转)

    原文地址:http://blog.csdn.net/caihaijiang/article/details/6664910 1.Maven内置变量说明: ${basedir} 项目根目录 ${proj ...

  8. mysqldump定时备份数据库

    mysql服务器ip:192.168.0.10 备份服务器ip:192.168.0.11 数据库名称:db_product 思路:在mysql服务器A上创建一个用户分配权限专门用于数据库备份,A服务器 ...

  9. 基数计数——HyperLogLog

    所谓的基数计数就是统计一组元素中不重复的元素的个数.如统计某个网站的UV,或者用户搜索网站的关键词数量:再如对一个网站分别统计了三天的UV,现在需要知道这三天的UV总量是多少,怎么融合多个统计值. 1 ...

  10. permutohedral lattice理解

    [完结]saliency filters精读之permutohedral lattice 2012年09月28日 22:40:08 工长山 阅读数:12432    版权声明:本文为博主原创文章,未经 ...