jQuery插件 -- 图片随页面滚动fixed
<!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的更多相关文章
- 用jquery实现平滑的页面滚动效果
通过几句jquery代码实现页面平滑滚动到某一锚点的效果.实现代码来源于https://css-tricks.com/snippets/jquery/smooth-scrolling 实现的jquer ...
- jQuery插件实现的页面功能介绍引导页效果
新产品上线或是改版升级,我们会在用户第一次使用产品时建立一个使用向导,引导用户如何使用产品,如使用演示的方式逐一介绍界面上的功能模块,从而提升了用户体验和产品的亲和力. Helloweba.com之前 ...
- jQuery插件图片懒加载lazyload
来自XXX的前言: 什么是ImageLazyLoad技术 在页面上图片比较多的时候,打开一张页面必然引起与服务器大数据量的 交互.尤其是对于高清晰的图片,占的几M的空间.ImageLazyLoad技术 ...
- jquery插件图片延时加载实例详解
效果预览:http://keleyi.com/keleyi/phtml/image/index.htm 使用方法:1.导入JS插件 <script src="http://keleyi ...
- ajax——三级联动下拉列表框的优化（简化页面，用jquery插件代替原来页面代码，返回处理数据类型为"TEXT"）
数据库: 主页面 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://ww ...
- 网页引导：jQuery插件实现的页面功能介绍引导页效果
现在很多网站不仅是介绍,更多的是有一些功能,怎么样让客户快速的知道网站有哪些功能呢?这里pagewalkthrough.js插件能帮我们实现,它是一个轻量级的jQuery插件,它可以帮助我们创建一个遮 ...
- Jquery实现图片左右自动滚动
图片左右滚动的效果想必大家都有见到过吧,其实很简单.在本文将为大家介绍下使用Jquery是如何实现图片左右自动滚动的. 代码如下:<!DOCTYPE HTML> <html> ...
- JQuery插件：ScrollTo平滑滚动到页面指定位置
1.准备jQuery库和scrollTo.js插件. <script type="text/javascript" src="js/jquery.js"& ...
- jQuery插件--图片文字向上向左循环滚动
需要引用jquery 调用非常简单: 一. 向上滚动 $(".scroll_two").jScroll({vertical: true}); <div class=" ...
随机推荐
- 秒懂JS对象、构造器函数和原型对象之间的关系
学习JS的过程中,想要掌握面向对象的程序设计风格,对象模型(原型和继承)是其中的重点和难点,拜读了各类经典书籍和各位前辈的技术文章,感觉都太过高深,花费了不少时间才搞明白(个人智商是硬伤/(ㄒoㄒ)/ ...
- 【Tomcat源码学习】-3.应用管理
通过上一节我们完成了对容器进行了加载.初始化.启动,而对于应用的加载部分独立出来,本节进行单独的讲解 一.应用加载流程 1)应用识别,Context创建 在Host启动后,会调用Host的监听Ho ...
- 在Oracle中添加用户登录名称
第一步,打开Oracle客户端单击 “帮助”-->"支持信息"-->”TNS名“,加入红色部分.页面如下: 第二步,再次打开Oracle客户端时,就会显示数据库了,只需 ...
- ZJOI2008树的统计Count
知识点-树链剖分 "在一棵树上进行路径的修改.求极值.求和":乍一看只要线段树就能轻松解决,实际上,仅凭线段树是不能搞定它的.我们需要用到一种貌似高级的复杂算法--树链剖分. ...
- Unity 脚本中各种[XXX]的用法
1.[SerializeField]在Inspector中显示非public属性,并且序列化:若写在public修饰的字段前,相当于没写,Unity会自动为Public变量做序列化,序列化的意思是说再 ...
- c标签和foreach循环不能加载
需要同时导入2个包: jstl.jar和standard.jar(大多数时候只会注意到jstl包,而忽视了standard包) 代码: c标签的写法 <%@ taglib prefix=&quo ...
- 设计模式之“Observer”注疏#01
原文首发于我的微信公众号:GeekArtT. Observer设计模式是为了解决"信息同步更新"的问题而存在的.它试图解决这样一个问题:如果有"一堆对象"都跟随 ...
- C#使用NOPI导入Excel
使用NOPI导入Excel文档 NOPI版本:2.3.0,依赖于NPOI的SharpZipLib版本:0.86,经测试适用于.net4.0+ 记录遇到的几个问题 NOPI中的IWorkbook接口:x ...
- js中__proto__和prototype的区别和关系？
_proto__(隐式原型)与prototype(显式原型)1.是什么 显式原型 explicit prototype property: 每一个函数在创建之后都会拥有一个名为prototype的属性 ...
- 走进javascript——类型
ECMAScript语言类型对应于使用ECMAScript语言的ECMAScript程序员直接操作的值.ECMAScript语言类型有以下几种Undefined,Null,Boolean,String ...