<!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. sql中的复制函数REPLICATE

    REPLICATE函数: REPLICATE(字符串,次数)复制一个字符串n次 ) --输出结果:0000000000

  2. JSSDK微信自定义分享

    背景:15年之前的微信分享只需要加入一段js就可以实现.后来微信官方全部禁止了.现在的微信分享全部得使用jssdk. 一.分享功能: 在微信内(必须在微信里)打开网站页面,分享给朋友或者分享到朋友圈时 ...

  3. SQL检索记录

    <<第一章检索记录>>:关于表使用SELECT语句和特殊字符"*": *:SELECT * from emp; 1:分别列出每一行:SELECT empno ...

  4. WebService学习--股票走势图+天气预报实现

        互联网上面有很多的免费webService服务,我们可以调用这些免费的WebService服务,将一些其他网站的内容信息集成到我们的Web应用中显示,下面就以获取股票数据和天气预报为例进行学习 ...

  5. Android触摸事件的应用

    前言 上一篇讲了Android触摸事件的传递机制,具体可以看这里 初识Android触摸事件传递机制.既然知道Android中触摸事件的传递分发,那么它能解决什么样的问题,在我们实际开发中如何应用,这 ...

  6. ZJOI2017 Round#2 滚粗记

    在杭州的火车站的KFC餐厅里,独自一人,闲来无事,便写写这篇博客.刚刚的一个礼拜,经历了余姚的省选和杭州的数学集训,感觉有些浪,学校里现在还在上新课,我已经落下一个礼拜的文化课了,回去估计补死:最重要 ...

  7. 编写高质量的JavaScript代码（一）

    欢迎大家关注腾讯云技术社区-博客园官方主页,我们将持续在博客园为大家推荐技术精品文章哦~ 2016年6月加入腾讯,目前在SNG社交网络质量部从事内部平台工具的研发.熟悉PHP.JS.CSS,喜欢弹吉他 ...

  8. 分针网—每日分享：HTML解析原理

    标准的web前端工程师需要知道 ◎浏览器(或者相应播放器)的渲染/重绘原理   这我得加把劲了.我还真的说的不是很清楚,我就G下,结果不是很多,找到了有一个,就记下来了...   以下部分来自hand ...

  9. Docker - 容器互联

    容器互联 通过docker run命令的--link参数可以让容器之间通过连接(linking)系统进行交互. 参数格式:--link name:alias ,name是要链接的容器名称, alias ...

  10. c# 操作monogodb的一些简单封装

    public interface IDataBaseCore { } public class BasicData : IDataBaseCore { } public class Filter    ...