<!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. MyBatis注解配置动态SQL

    MySQL创建表 DROP TABLE IF EXISTS `tb_employee`; CREATE TABLE `tb_employee` ( `id` int(11) NOT NULL AUTO ...

  2. JS的块级作用域

    今天带来的是 "对<你不知道的js>中块级作用域的总结" 分享: 1)用with从对象中创建出来的作用域只在with声明中而非外部作用域有效,同时可以访问已有对象的属性 ...

  3. StringHelper--封转自己的字符串工具类

    我们每次开发项目,都会有很多的关于字符串的处理,字符串的处理太常见了,无法避免,那么这时如果可以把常用的字符串处理封装成类,在以后的开发中应该会减少一些工作量,下面代码对一些常用的字符串处理进行了封装 ...

  4. 篇3 安卓app自动化测试-搞定界面元素

    篇3                 安卓app自动化测试-搞定界面元素 --lamecho辣么丑 1.1概要 大家好! 我是lamecho(辣么丑),今天是<安卓app自动化测试>的第三 ...

  5. java 并发工具类CountDownLatch & CyclicBarrier

    一起在java1.5被引入的并发工具类还有CountDownLatch.CyclicBarrier.Semaphore.ConcurrentHashMap和BlockingQueue,它们都存在于ja ...

  6. bootstrap快速入门笔记（六）-代码

    一,内联代码<code>:For example, <code><section></code> should be wrapped as inline ...

  7. java集合的核心知识

    1.    集合 1.1. 什么是集合 存储对象的容器,面向对象语言对事物的体现都是以对象的形式,所以为了方便对多个对象的操作,存储对象,集合是存储对象最常用的一种方式. 集合的出现就是为了持有对象. ...

  8. ASP.Net零碎

    ASP.Net零碎 ServerPush 什么是ServerPush,服务器向客户端浏览器“推送”,其实就是“长连接”. 只有浏览器请求服务器端,服务器端才有给浏览器响应数据,不会主动向浏览器推送数据 ...

  9. sublime text 3文件标题无法显示中文的解决办法

    前言 你是否遇也到了sublime文件标题无法显示中文的问题呢?如下列图片所示: 解决办法 1.点击菜单栏Preferences - > Settings. 打开下图: 2.在右边User内加入 ...

  10. ThinkPHP3.2——基础

    1.1.获取ThinkPHP 3.2 获取ThinkPHP的方式很多,官方网站(http://thinkphp.cn)是最好的下载和文档获取来源. 官网提供了稳定版本的下载:http://thinkp ...