<!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. VS2003"无法启动调试 没有正确安装调试器"的解决方法

    在用VS2003做项目的时候,经常调试程序,但是有时候回出现如下问题“无法启动调试,没有正确安装调试器,请运行安装程序或修复调试器”.第一次碰到还以为是运气不好,就重新用vs2003安装程序重新修复了 ...

  2. 自定义input默认placeholder样式

    input::input-placeholder { color: #fb4747; } input::-webkit-input-placeholder { color: #fb4747; } in ...

  3. 仿：Android - 微信 - 朋友圈 - 小视频播放，多 4 句废话算我输

    作者:林冠宏 / 指尖下的幽灵 掘金:https://juejin.im/user/587f0dfe128fe100570ce2d8 博客:http://www.cnblogs.com/linguan ...

  4. 转Fiddler 构造http请求

    今天使用Fiddler构造一个POST请求,server端的PHP脚本的 $_POST数组中怎么也获取不到值,后来偶然发现是因为缺少了一个http头:Content-Type: application ...

  5. Markdown - 语法简介

    标题 在文字里书写不同数量的“#”可以完成不同的标题,如下: # 一级标题 ## 二级标题 ### 三级标题 #### 四级标题 ##### 五级标题 ###### 六级标题 列表 无序列表的使用,在 ...

  6. 详细解剖大型H5单页面应用的核心技术点

    项目 Xut.js 阐述下开发中一个比较核心的优化技术点,这是一套平台代码,并非某一个插件功能或者框架可以直接拿来使用,核心代码大概是6万行左右(不包含任何插件) .这也并非一个开源项目,不能商业使用 ...

  7. string 学习

    #include <string> 1.取当中某个字符 与传统一样 c[11]="0123456789"; c[1]=1; ps:好慢 .. 会不会GG... #inc ...

  8. 《Thinking in Java》 And 《Effective Java》啃起来

    前言 今天从京东入手了两本书,<Thinking in Java>(第四版) 和 <Effective Java>(第二版).都可以称得上是硬书,需要慢慢啃的,预定计划是在今年 ...

  9. zabbix监控rds

    问题:使用zabbix监控rds,用之前的脚本,执行总是会有密码安全提示: [root@iZ25m1box8cZ alertscripts]# sh rds.sh Uptime mysqladmin: ...

  10. [js笔记整理]事件篇

    一.事件流1.冒泡事件:从特定的事件到不特定事件依次触发:(由DOM层次的底层依次向上冒泡)(1)示例: <html onclick="add('html<br>')&qu ...