基于jquery的DIV随滚动条滚动而滚动的代码


Posted in Javascript onJuly 20, 2012

核心代码:

<script type="text/javascript" src="http://demo.3water.com/jslib/jquery/jquery-1.7.2.min.js"></script> 
<script type="text/javascript"> 
$(function() { 
$(window).scroll(function() { 
var top = $(window).scrollTop()+200; 
var left= $(window).scrollLeft()+320; 
$("#editInfo").css({ left:left + "px", top: top + "px" }); 
}); 
}); 
</script> <div id="editInfo" style="float:left;width:300px;background-color:#ccc;position:absolute;top:200px;"> 
<div>用户名:<input type="text" /></div> 
<div>密码:<input type="text" /></div> 
<div>年龄:<input type="text" /></div> 
<div>备注:<input type="text" /></div> 
<div><input type="button" value="保存" /></div> 
</div> 
<div style="height:1500px"></div>

在线演示 http://demo.3water.com/js/2012/jquery_demo/jquery_div.html
记得以前写这样的代码比较麻烦,现在有了JQuery简单多了,就几行代码搞定!
Javascript 相关文章推荐
Javascript UrlDecode函数代码
Jan 09 Javascript
用JQuery实现全选与取消的两种简单方法
Feb 22 Javascript
JS删除字符串中重复字符方法
Mar 09 Javascript
jQuery中detach()方法用法实例
Dec 25 Javascript
JavaScript中的标签语句用法分析
Feb 10 Javascript
Bootstrap选项卡与Masonry插件的完美结合
Jul 06 Javascript
javascript入门之window对象【新手必看】
Nov 22 Javascript
Vue.js中extend选项和delimiters选项的比较
Jul 17 Javascript
vue实现的下拉框功能示例
Jan 29 Javascript
AngularJS实现的自定义过滤器简单示例
Feb 02 Javascript
layer 刷新某个页面的实现方法
Sep 05 Javascript
ant design charts 获取后端接口数据展示
May 25 Javascript
最佳6款用于移动网站开发的jQuery 图片滑块插件小结
Jul 20 #Javascript
基于jquery的图片轮播 tab切换组件
Jul 19 #Javascript
JavaScript面向对象知识串结(读JavaScript高级程序设计(第三版))
Jul 17 #Javascript
JavaScript面向对象(极简主义法minimalist approach)
Jul 17 #Javascript
基于jQuery的获取标签名的代码
Jul 16 #Javascript
写自已的js类库需要的核心代码
Jul 16 #Javascript
js不完美解决click和dblclick事件冲突问题
Jul 16 #Javascript
You might like
php中的路径问题与set_include_path使用介绍
2014/02/11 PHP
PHP 读取文本文件内容并分页显示
2016/01/02 PHP
PHP 二级子目录(后台目录)设置二级域名
2017/03/02 PHP
网页自动跳转代码收集
2009/09/27 Javascript
js 获取坐标 通过JS得到当前焦点(鼠标)的坐标属性
2013/01/04 Javascript
jquery弹出关闭遮罩层实例
2013/08/06 Javascript
jQuery实现文本框输入同步的方法
2015/06/20 Javascript
探究Javascript模板引擎mustache.js使用方法
2016/01/26 Javascript
JavaScript+CSS实现的可折叠二级菜单实例
2016/02/29 Javascript
javascript实现标签切换代码示例
2016/05/22 Javascript
JavaScript实现窗口抖动效果
2016/10/19 Javascript
JS滚动到指定位置导航栏固定顶部
2017/07/03 Javascript
js实现移动端轮播图效果
2020/12/09 Javascript
js防刷新的倒计时代码 js倒计时代码
2017/09/06 Javascript
mpvue项目中使用第三方UI组件库的方法
2018/09/30 Javascript
深入解析ES6中的promise
2018/11/08 Javascript
Python 类与元类的深度挖掘 II【经验】
2016/05/06 Python
Python中Threading用法详解
2017/12/27 Python
详解python中的线程
2018/02/10 Python
深入浅析Python获取对象信息的函数type()、isinstance()、dir()
2018/09/17 Python
python交换两个变量的值方法
2019/01/12 Python
pyqt5对用qt designer设计的窗体实现弹出子窗口的示例
2019/06/19 Python
Python pandas实现excel工作表合并功能详解
2019/08/29 Python
Python + Requests + Unittest接口自动化测试实例分析
2019/12/12 Python
Python读取二进制文件代码方法解析
2020/06/22 Python
Python如何实现线程间通信
2020/07/30 Python
详解pycharm配置python解释器的问题
2020/10/15 Python
纯CSS实现预加载动画效果
2017/09/06 HTML / CSS
教你使用Canvas处理图片的方法
2017/11/28 HTML / CSS
挪威手表购物网站:Klokker
2016/09/19 全球购物
应聘医学检验人员自荐信
2013/09/27 职场文书
放飞蜻蜓反思
2014/02/05 职场文书
介绍信样本
2015/01/31 职场文书
世界气象日活动总结
2015/02/27 职场文书
浅谈Laravel中使用Slack进行异常通知
2021/05/29 PHP
微信小程序 WeUI扩展组件库的入门教程
2022/04/21 Javascript