$.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. zookeeper视图工具

    https://www.cnblogs.com/xd502djj/p/8919425.html

  2. redis 4.0.8 源码包安装集群

    系统:centos 6.9软件版本:redis-4.0.8,rubygems-2.7.7,gcc version 4.4.7 20120313,openssl-1.1.0h,zlib-1.2.11 y ...

  3. java写桌面程序

    一:使用java swing开发窗口程序 简述: 1.文章内容主要是使用java swing类库开发一个小的窗口程序,然后使用exe4j发布成exe可以安装的程序,让初学者对使用java来做pc软件开 ...

  4. Springboot整合二 集成 rabbitmq

    1.在application.yml文件中进行RabbitMQ的相关配置先上代码 spring: rabbitmq: host: 192168.21.11 port: username: guest ...

  5. Python时间,日期,时间戳之间转换,时间转换时间戳,Python时间戳转换时间,Python时间转换时间戳

    #1.将字符串的时间转换为时间戳方法: a = "2013-10-10 23:40:00" #将其转换为时间数组 import time timeArray = time.strp ...

  6. lsb_release command not found

    Linux里的lsb_release命令用来查看当前系统的发行版信 息(prints certain LSB (Linux Standard Base) and Distribution inform ...

  7. OC 与 js 界面JSBridge交互

    // 1.新建WebView self.webView = [[UIWebView alloc] initWithFrame:self.view.bounds]; [self.view addSubv ...

  8. MySQL高性能优化系列-目录

    MySQL高性能优化系列-目录 (1)Mysql高性能优化规范建议 (2)电商数据库表设计 (3)MySQL分区表使用方法 (4)MySQL执行计划分析 (5)电商场景下的常见业务SQL处理 (6)M ...

  9. 【iCore4 双核心板_uC/OS-II】例程十:信号量集

    一.实验说明: 在实际应用中,任务常常需要与多个事件同步,即要根据多个信号量组合作用的结果来决定任务的运行方式.UCOSII为了实现多个信号量组合的功能定义了一种特殊的数据结构——信号量集. 二.实验 ...

  10. spring-boot项目建立

    使用idea来开发spring-boot项目,对于community版本的idea,由于没有spring-boot插件,所有对于开发spring-boot的web项目来说不是很方便,所以安装Ultim ...