$.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. [android警告]AndroidManifest.xml警告 Not targeting the latest versions of Android

    警告:Not targeting the latest versions of Android; compatibility modes apply.Consider testing and upda ...

  2. spring boot 搭建

    http://www.ityouknow.com/springboot/2018/06/12/spring-boo-java-simple.html 在http://start.spring.io/下 ...

  3. 【Python】 解析Python中的运算符

    Python中的运算符相比较于传统的C/C++差别不是很大,主要是一些个别的运算符上的差别.包括:算术.比较.赋值.位.逻辑.成员.身份等.它们的优先级: 符号 说明 ** 指数(最高优先级) ~,+ ...

  4. 使用idea对spring boot项目打jar和war包[文件]

    pom.xml文件编写 打JAR包时 <groupId>com.netcorner</groupId> <artifactId>demo</artifactI ...

  5. 快速搭建python程序

    公司对外提供了http接口服务,涉及到了des加密,有客户用Python开发,但搞不定加密,客户的问题就是大问题,虽然以前没接触过Python,也只能硬着头皮上,不停的baidu各种资料,从环境搭建. ...

  6. Java基础(三)面向对象(下)

    接口 接口中成员修饰符是固定的: 成员常量:public static final 成员函数:public abstract 通过接口间接实现了多重继承 接口的特点 接口是对外暴露的规则 接口是程序的 ...

  7. Atitit 创业好处 Atitit 为什么我们要创业

    Atitit 创业好处 Atitit 为什么我们要创业 1.1. 提升学历 1 1.2. 提升自己的能力 1 1.3. 拓展视野 站在高层ceo 才能掌握全局.站在产业链高层,才可看到趋势. 1 1. ...

  8. Unable to find IPv4-only network bridge for LXD.

    https://github.com/conjure-up/conjure-up/issues/1440It seems like the the installation is complainin ...

  9. 大批量delete 优化方案

    超过100万以上数据 删除的时候 会非常慢且产生大量日志文件 最大的问题是内存爆表 导致得多次重启服务才能删除整个库 暂时提出初步优化方案 1.设置日志为简单模式,处理完后恢复 ALTER DATAB ...

  10. virtualbox 在物理机是无线网卡的时候做桥接配置

    在“计算机”图标上右键选择“管理”,在打开的“计算机管理”窗口中选择左侧的“设备管理器”,然后在右侧图示的地方右键选择“添加过时硬件”. 在打开的窗口中点击“下一步”. 选择“安装我手动从列表中选择的 ...