<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

</head>

<body style="margin:0;padding:0;height:2000px;">

    <div style="height: 500px;background: #ccc;">this is div</div>

    <img src="baloons.jpg" width="500">

</body>

<script src="jquery-1.12.4.min.js"></script>

<script>

    $.fn.extend({

        fixedPos : function(param){

            var $offTop = Number(param)>=0 ? param : 0;

            this.each(function(){

                var $obj = $(this);

                var offTop = $obj.offset().top - $offTop;

                var offLeft = $obj.offset().left;

                $(window).on("scroll",function(){

                    var scrollTop = $(window).scrollTop();

                    if(scrollTop >= offTop){

                        $obj.css({'position':'fixed','left':offLeft,'top':$offTop});

                    }else{

                        $obj.css('position','static');

                    }

                })

            })

        }

    })

    $("img").fixedPos(40);

</script>

</html>

jQuery插件 -- 图片随页面滚动fixed的更多相关文章

  1. 用jquery实现平滑的页面滚动效果

    通过几句jquery代码实现页面平滑滚动到某一锚点的效果.实现代码来源于https://css-tricks.com/snippets/jquery/smooth-scrolling 实现的jquer ...

  2. jQuery插件实现的页面功能介绍引导页效果

    新产品上线或是改版升级,我们会在用户第一次使用产品时建立一个使用向导,引导用户如何使用产品,如使用演示的方式逐一介绍界面上的功能模块,从而提升了用户体验和产品的亲和力. Helloweba.com之前 ...

  3. jQuery插件图片懒加载lazyload

    来自XXX的前言: 什么是ImageLazyLoad技术 在页面上图片比较多的时候,打开一张页面必然引起与服务器大数据量的 交互.尤其是对于高清晰的图片,占的几M的空间.ImageLazyLoad技术 ...

  4. jquery插件图片延时加载实例详解

    效果预览:http://keleyi.com/keleyi/phtml/image/index.htm 使用方法:1.导入JS插件 <script src="http://keleyi ...

  5. ajax——三级联动下拉列表框的优化（简化页面，用jquery插件代替原来页面代码，返回处理数据类型为"TEXT"）

    数据库: 主页面 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://ww ...

  6. 网页引导：jQuery插件实现的页面功能介绍引导页效果

    现在很多网站不仅是介绍,更多的是有一些功能,怎么样让客户快速的知道网站有哪些功能呢?这里pagewalkthrough.js插件能帮我们实现,它是一个轻量级的jQuery插件,它可以帮助我们创建一个遮 ...

  7. Jquery实现图片左右自动滚动

    图片左右滚动的效果想必大家都有见到过吧,其实很简单.在本文将为大家介绍下使用Jquery是如何实现图片左右自动滚动的. 代码如下:<!DOCTYPE HTML>  <html> ...

  8. JQuery插件：ScrollTo平滑滚动到页面指定位置

    1.准备jQuery库和scrollTo.js插件. <script type="text/javascript" src="js/jquery.js"& ...

  9. jQuery插件--图片文字向上向左循环滚动

    需要引用jquery 调用非常简单: 一. 向上滚动 $(".scroll_two").jScroll({vertical: true}); <div class=" ...

随机推荐

  1. 如何使用第三方webservice

    webservice地址后加wdls 生成后把文件名改为wdsl 调用方式: 1.添加webservice引用: 2.生成代理类的方法(本人比较喜欢用这种方式): 使用cmd命令行: a.通过webs ...

  2. Linux--管道pipe

    管道是一种最基本的IPC机制,由pipe函数创建:#include <unistd.h>
int pipe(int filedes[2]); 调用pipe函数时在内核中开辟一块缓冲区(称为 ...

  3. Web层框架对网站中所有异常的统一解决

    一个网站的异常信息作为专业的人士,是不会轻易暴露给用户的,因为那样狠不安全,显得你漏是一回事,只要还是考虑到网站的数据安全问题,下面给大家分享一下一些常见的web层框架是如何处理统一的异常. 之前都是 ...

  4. 将子域名请求路由到MVC区域

    写了个扩展,分享给需要的朋友. 0x01 使用方法 在mvc区域中的{xxxx}AreaRegistration.cs文件中,如ProjectsAreaRegistration.cs <pre& ...

  5. 【转】QQ传输文件原理参考（来自互联网）

    QQ的文件发送是怎样的过程呢?通常,发送文件的计算机首先要通过消息服务器将其IP地址发送给接收计算机,当接收计算机同意接收的确认消息反馈到消息服务器后,消息服务器将据此设置好文件传输对话.随即,发送计 ...

  6. openwrt通过libcurl上传图片，服务器端通过PHP接收文件

    一.客户端文件上传 libcurl上传文件有两种方式: 1.直接上传文件,类似form表单<input type=”file” />,<form enctype=”multipart ...

  7. Mysql net start mysql启动,提示发生系统错误 5 拒绝访问,原因所在以及解决办法

    1,Mysql net start mysql启动,提示发生系统错误 5 拒绝访问 在dos下运行net  start MySQL 不能启动mysql!提示发生系统错误 5:拒绝访问!切换到管理员模式 ...

  8. O（mn）实现LCIS

    序: LCIS即求两序列的最长公共不下降子序列.思路于LCS基本一致. 用dp[i][j]记录当前最大值. 代码实现: /* About: LCIS O(mn) Auther: kongse_qi D ...

  9. R语言结合概率统计的体系分析---数字特征

    现在有一个人,如何对这个人怎么识别这个人?那么就对其存在的特征进行提取,比如,提取其身高,其相貌,其年龄,分析这些特征,从而确定了,这个人就是这个人,我们绝不会认错. 同理,对数据进行分析,也是提取出 ...

  10. Java学习笔记——排序算法之快速排序

    会当凌绝顶,一览众山小. --望岳 如果说有哪个排序算法不能不会,那就是快速排序(Quick Sort)了 快速排序简单而高效,是最适合学习的进阶排序算法. 直接上代码: public class Q ...