$.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. Ubuntu安装WDCP遇到的无法便于错误解决方法

    WDCP v3.2安装 WDCP支持CentOS系统下安装,包括了32bit或者64bit,最新版本建议在6.x以上版本使用,源码安装命令为: wget http://dl.wdlinux.cn/la ...

  2. 【PHP】PHP 7.4 新特性

    PHP 7.4 预计在 2019 年年末就会正式发布了,本文先来看看一下 PHP 7.4 的新特性. 1.预加载 预加载的实现理论上是可以为 PHP 带来很大的性能提升的.比如说:现在传统的 PHP ...

  3. How to trigger a Kubernetes cronjob manually-手动触发一个cronjob

    What should you do when you’ve developed and installed a cron job for your Kubernetes application, a ...

  4. OpenCV自带dnn的Example研究(3)— object_detection

    这个博客系列,简单来说,今天我们就是要研究 https://docs.opencv.org/master/examples.html下的 6个文件,看看在最新的OpenCV中,它们是如何发挥作用的. ...

  5. 在 Windows 8、Windows 10 桌面模式下的 .NET Framework 程序中,引用 Windows.Runtime 的 API。

    参考:1.https://www.cnblogs.com/webtojs/p/9675956.html 2.http://jennal.com/2016/04/28/using-windows-run ...

  6. 重置BizTalk RosettaNet

    RosettaNet如果出现问题,可以进行重新配置安装,不过重置过程稍微有点麻烦.步骤如下: 注意:执行如下步骤前请做全部备份工作,如BTARN文件夹,自主开发的BTARN应用程序源码.MSI及Bin ...

  7. paste

    echo "step 1" >> steplog.txt    echo "step 1"        sudo apt-get install ...

  8. WWDC 17: 开发者的最初观感

    WWDC 17: 开发者的最初观感 前言 每年的 WWDC 都是 iOS 开发者集体高潮的时刻.第一天的 WWDC 带来了全新的 iOS 11.MacOS.tvOS 和 watchOS,革命性的 AR ...

  9. crontab 选择编辑器 select-editor

    用root第一次运行 crontab -e 会出现如题的错误,解决方法如下: 1.select-editor 选择编辑器,我选的vim.basic. 2.crontab -e 进入编辑器编辑. 推荐第 ...

  10. python输出有色记录

    一.第三方模块coloredlogs # Create a logger object. import logging logger = logging.getLogger('your-module' ...