$.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. 使用Azure的GPU系列虚拟机Ubuntu-16.0.4安装GPU驱动并使用Tensorflow-GPU的过程。

    1.source activate python362.source activate tensorflow-gpu3.pip install tensorflow-gpu(提示安装的这个版本:ten ...

  2. 图 总结 AI

    这个哥们 总结的太好了, 我忍不住就“偷”过来了 人工智能是一门极富挑战性的科学,从事这项工作的人必须懂得计算机知识,心理学和哲学. 人工智能是包括十分广泛的科学,它由不同的领域组成,如机器学习,计算 ...

  3. java mqtt

    代码: package cc.gongchang.mqtt; import java.net.URISyntaxException; import org.fusesource.hawtdispatc ...

  4. animate.css做点赞效果

    花了一晚上研究出来的,感觉还行吧... 代码: 源码下载: http://image.niunan.net/animatedemo.zip

  5. Navicat(数据库可视化操作软件)安装、配置、测试

    Navicat(数据库可视化操作软件)安装.配置.测试(win7_64bit) 目录 1.概述 2.本文用到的工具 3.Navicat安装.激活与配置 4.简单测试 5.注意事项 6.相关博文 > ...

  6. 深入分析 ThreadLocal

    ThreadLoacal是什么? ThreadLocal是啥?以前面试别人时就喜欢问这个,有些伙伴喜欢把它和线程同步机制混为一谈,事实上ThreadLocal与线程同步无关.ThreadLocal虽然 ...

  7. Linux时区详解

    全球24个时区的划分 相较于两地时间表,可以显示世界各时区时间和地名的世界时区表(World Time),就显得精密与复杂多了,通常世界时区表的表盘上会标示着全球24个时区的城市名称,但究竟这24个时 ...

  8. 12 Best Live Chat Software for Small Business Compared (2019) 最佳的wordpress在线聊天工具推荐插件 来帮你和潜在客户互动

    12 Best Live Chat Software for Small Business Compared (2019)     Did you know that more than 67% of ...

  9. springmvc date

    数据格式化,从本质上讲属于数据转换的范畴.Spring就是基于数据转换框架植入“格式化”功能的. 在数据转换时我们进行了如下配置: 我们使用的是ConversionServiceFactoryBean ...

  10. 某公司面试java试题之【一】,看看吧,说不定就是你将要做的题