$.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. 获得最近一天的提交,并使用winscp上传到服务器

    @echo off D:\dev\Git\bin\git.exe pull origin master D:\dev\Git\bin\git.exe add -A D:\dev\Git\bin\git ...

  2. Docker配置参考

    Docker配置参考 一.参数列表 参考网址:https://docs.docker.com/engine/reference/commandline/dockerd/#options Usage: ...

  3. mysql字符串用法

    replace(str,from_str,to_str) --用字符串to_str替换字符串str中的子串from_str并返回 --mysql> select replace('www.mys ...

  4. Android开发导出apk报错:Unable to build: the file dx.jar was not loaded from the SDK folder

    问题背景 此问题一般出现在,同时使用了Eclipse和Android Studio,eclipse是不会去下载最新的Android的相关tools,但是studio有时候会自动更新最新的build-t ...

  5. pom文件中maven-assembly-plugin插件学习

    一.使用场景 如果项目是微服务架构,可能用到这个插件的概率比较高,平时普通的项目不需要这样的实现方式. 如果项目内的一部分通用功能,不需要挨个引用,则需要将通用功能部分达成jar包. 二.Maven- ...

  6. [k8s] flexvolume workflow

  7. curl 模拟请求

    https://www.jianshu.com/p/7965c56c5a2e ********************************************* 一般情况下我们会在网页上请求后 ...

  8. eclipse is missing required source folder src/test/java

    原因:maven的bug,不兼容eclipse 解决方法:右击工程,选择run-->maven-->build重新构建工程,就解决了.

  9. 基于expressjs老项目的翻新方案

    刚开始接触这方面的项目时,对ES规范理解不深,查了一些资料,发现如果不改expressjs的代码,大概率是没法用到最新的async/await了,后续也就没有继续往这个方面想. 这两天突然想起这个问题 ...

  10. 值得从PHP转向JavaScript

    1.掌握一门语言而成为爆栈工程师确实诱惑力极大 2.JavaScript 代码的语义性比 PHP 更强一些,当然语言整体特性也复杂不少,学习成本是更高的 3.JSON原生:配合MongoDB的话,从头 ...