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 相关文章推荐
jQuery 对Select的操作备忘记录
Jul 04 Javascript
node.js中的fs.readFileSync方法使用说明
Dec 15 Javascript
jQuery实现仿Google首页拖动效果的方法
May 04 Javascript
jquery选择器简述
Aug 31 Javascript
js实现带缓冲效果的仿QQ面板折叠菜单代码
Sep 06 Javascript
js性能优化技巧
Nov 29 Javascript
基于jquery实现表格无刷新分页
Jan 07 Javascript
Angularjs在初始化未完毕时出现闪烁问题的解决方法分析
Aug 05 Javascript
Javascript将图片的绝对路径转换为base64编码的方法
Jan 11 Javascript
vue 中swiper的使用教程
May 22 Javascript
vue-week-picker实现支持按周切换的日历
Jun 26 Javascript
通过微信公众平台获取公众号文章的方法示例
Dec 25 Javascript
原生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
Look And Say 序列php实现代码
2011/05/22 PHP
PHP中new static()与new self()的区别异同分析
2014/08/22 PHP
php集成环境xampp中apache无法启动问题解决方案
2014/11/18 PHP
redis+php实现微博(一)注册与登录功能详解
2019/09/23 PHP
js中查找最近的共有祖先元素的实现代码
2010/12/30 Javascript
让浏览器非阻塞加载javascript的几种方法小结
2011/04/25 Javascript
jquery.pagination.js 无刷新分页实现步骤分享
2012/05/23 Javascript
使用 Node.js 做 Function Test实现方法
2013/10/25 Javascript
javascript类型转换示例
2014/04/29 Javascript
JavaScript实现的一个倒计时的类
2015/03/12 Javascript
JavaScript中各种引用类型的常用操作方法小结
2016/05/05 Javascript
js获取Html元素的实际宽度高度的方法
2016/05/19 Javascript
JS Array创建及concat()split()slice()的使用方法
2016/06/03 Javascript
微信小程序 框架详解及实例应用
2016/09/26 Javascript
原生js实现类似fullpage的单页/全屏滚动
2017/01/22 Javascript
vue 2.0项目中如何引入element-ui详解
2017/09/06 Javascript
React注册倒计时功能的实现
2018/09/06 Javascript
angularJS1 url中携带参数的获取方法
2018/10/09 Javascript
从零开始用electron手撸一个截屏工具的示例代码
2018/10/10 Javascript
微信小程序实现简单跑马灯效果
2020/05/26 Javascript
详解Webpack抽离第三方类库以及common解决方案
2020/03/30 Javascript
[57:37]EG vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
python 中文字符串的处理实现代码
2009/10/25 Python
python使用pymysql实现操作mysql
2016/09/13 Python
python爬虫 正则表达式使用技巧及爬取个人博客的实例讲解
2017/10/20 Python
详解tensorflow实现迁移学习实例
2018/02/10 Python
python re正则匹配网页中图片url地址的方法
2018/12/20 Python
Python3模拟登录操作实例分析
2019/03/12 Python
Python下简易的单例模式详解
2019/04/08 Python
python“静态”变量、实例变量与本地变量的声明示例
2020/11/13 Python
介绍一下grep命令的使用
2015/06/12 面试题
战略合作协议书范本
2014/04/18 职场文书
老龄工作先进事迹
2014/08/15 职场文书
2015年创先争优活动总结
2015/03/27 职场文书
Win11绿屏怎么办?Win11绿屏死机的解决方法
2021/11/21 数码科技
使用Ajax实现无刷新上传文件
2022/04/12 Javascript