$.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. Javascript 面向对象的编程思想

    面向对象,首先得有类的概念,没有类造不出来对象,,Javascript把函数名看成类. 其次分为不同结构层,如三层架构.MVC.MVVM. 本文根据实际项目演练,分为几个适用的结构层,如果项目不大一般 ...

  2. 华为ap3010DN-V2刷出胖AP并配置接入POE交换机实现上网

    配置FAT AP二层组网示例 组网图形 图1 配置二层网络WLAN基本业务示例组网图 组网需求 如图1所示,FAT AP通过有线方式接入Internet,通过无线方式连接终端.现某企业分支机构为了保证 ...

  3. 全面理解Java内存模型(JMM)及volatile关键字(转载)

    关联文章: 深入理解Java类型信息(Class对象)与反射机制 深入理解Java枚举类型(enum) 深入理解Java注解类型(@Annotation) 深入理解Java类加载器(ClassLoad ...

  4. WebViewJavascriptBridge 进行js 与native通信。

    1,  iOS端加载web页面.开启日志并给webView建立JS与OC的桥梁 - (void)viewWillAppear:(BOOL)animated { if (_bridge) { retur ...

  5. 利用git 进行多人协作开发

    现在,大部分项目都是用 git 来管理代码的,但当项目变大.多人协作时,git 的使用就变得复杂了,这时就需要在 git 使用的流程上来思考如何更优的使用 git. 对于大部分 web 项目而言,并不 ...

  6. 【基础篇】elasticsearch之索引模板Template[转]

    一,模板简述:template大致分成setting和mappings两部分:索引可使用预定义的模板进行创建,这个模板称作Index templates.模板设置包括settings和mappings ...

  7. MongoDB 查询总结

    1.含日期查询 从起始时间到结束时间 BasicDBObject queryObj = new BasicDBObject(); queryObj.put("date",new B ...

  8. ant 通配符

    ant 通配符 我们常用的匹配模式有ANT模式,比如acegi可以用PATTERN_TYPE_APACHE_ANT来使用ANT匹配模式,那什么是ANT匹配模式呢.   ANT通配符有三种:     通 ...

  9. Github + Hexo 搭建个人博客

    参考博客: 我是如何利用Github Pages搭建起我的博客,细数一路的坑 使用Hexo+Github一步步搭建属于自己的博客(基础) Hexo 准备工作: 本机已安装好 git, npm 和 no ...

  10. java.lang.UnsatisfiedLinkError: No implementation found for long org.opencv.core.Mat.n_Mat()

    Android调试openCV4Android的时候出现以下错误 java.lang.UnsatisfiedLinkError: No implementation found for long or ...