DIV随滚动条滚动而滚动的实现代码【推荐】


Posted in Javascript onApril 12, 2016

记得以前写这样的代码比较麻烦,现在有了JQuery简单多了,就几行代码搞定!

<script type="text/javascript" src="Js/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随滚动条滚动而滚动的实现代码【推荐】就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
一款JavaScript压缩工具:X2JSCompactor
Jun 13 Javascript
express的中间件cookieParser详解
Dec 04 Javascript
jQuery中eq()方法用法实例
Jan 05 Javascript
限制文本框只能输入数字||只能是数字和小数点||只能是整数和浮点数
May 27 Javascript
Bootstrap学习笔记之js组件(4)
Jun 12 Javascript
AngularJS变量及过滤器Filter用法分析
Nov 22 Javascript
Bootstrap Tooltip显示换行和左对齐的解决方案
Oct 11 Javascript
详解vue.js下引入百度地图jsApi的两种方法
Jul 27 Javascript
Vuex的actions属性的具体使用
Apr 14 Javascript
微信小程序实现消息框弹出动画
Apr 18 Javascript
vue使用axios实现excel文件下载的功能
Jul 16 Javascript
详解Vue3.0 + TypeScript + Vite初体验
Feb 22 Vue.js
原生js实现百叶窗效果及原理介绍
Apr 12 #Javascript
CascadeView级联组件实现思路详解(分离思想和单链表)
Apr 12 #Javascript
jquery中实现时间戳与日期相互转换
Apr 12 #Javascript
Angular.js与Bootstrap相结合实现表格分页代码
Apr 12 #Javascript
JS代码防止SQL注入的方法(超简单)
Apr 12 #Javascript
zTree插件下拉树使用入门教程
Apr 11 #Javascript
对jquery的ajax进行二次封装以及ajax缓存代理组件:AjaxCache详解
Apr 11 #Javascript
You might like
使用pthreads实现真正的PHP多线程(需PHP5.3以上版本)
2014/05/05 PHP
php截取字符串函数分享
2015/02/02 PHP
汇总PHPmailer群发Gmail的常见问题
2016/02/24 PHP
js禁止document element对象选中文本实现代码
2013/03/21 Javascript
通过$(this)使用jQuery包装后的方法或属性
2014/05/18 Javascript
百度判断手机终端并自动跳转js代码及使用实例
2014/06/11 Javascript
jQuery实现为图片添加镜头放大效果的方法
2015/06/25 Javascript
使用JavaScript实现ajax的实例代码
2016/05/11 Javascript
js控制li的隐藏和显示实例代码
2016/10/15 Javascript
基于JavaScript实现数码时钟效果
2020/03/30 Javascript
React-native桥接Android原生开发详解
2018/01/17 Javascript
angular第三方包开发整理(小结)
2018/04/19 Javascript
KOA+egg.js集成kafka消息队列的示例
2018/11/09 Javascript
记一次vue去除#问题处理经过小结
2019/01/24 Javascript
vue-cli3项目展示本地Markdown文件的方法
2019/06/07 Javascript
微信小程序中weui用法解析
2019/10/21 Javascript
Python中函数的参数定义和可变参数用法实例分析
2015/06/04 Python
python、java等哪一门编程语言适合人工智能?
2017/11/13 Python
在Python中给Nan值更改为0的方法
2018/10/30 Python
对Python定时任务的启动和停止方法详解
2019/02/19 Python
python实现广度优先搜索过程解析
2019/10/19 Python
通过实例了解python property属性
2019/11/01 Python
通过实例解析python创建进程常用方法
2020/06/19 Python
keras的backend 设置 tensorflow,theano操作
2020/06/30 Python
python爬虫智能翻页批量下载文件的实例详解
2021/02/02 Python
css3动画 小球滚动 js控制动画暂停
2019/11/29 HTML / CSS
吉列剃须刀美国官网:Gillette美国
2018/07/13 全球购物
Nip + Fab官网:英国美容品牌
2019/08/26 全球购物
C#面试题问题集
2016/04/02 面试题
开办加工厂创业计划书
2014/01/03 职场文书
宿舍使用违章电器检讨书
2014/01/12 职场文书
聚美优品恶搞广告词
2014/03/14 职场文书
高一军训的心得体会
2014/09/01 职场文书
锅炉工岗位职责
2015/02/13 职场文书
如何使JavaScript休眠或等待
2021/04/27 Javascript
使用Django框架创建项目
2022/06/10 Python