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 相关文章推荐
js更优雅的兼容
Aug 12 Javascript
Windows 系统下安装和部署Egret的开发环境
Jul 31 Javascript
JS实现兼容各种浏览器的高级拖动方法完整实例【测试可用】
Jun 21 Javascript
JS经典正则表达式笔试题汇总
Dec 15 Javascript
使用vue.js2.0 + ElementUI开发后台管理系统详细教程(二)
Jan 21 Javascript
vue组件中使用iframe元素的示例代码
Dec 13 Javascript
Angular Material Icon使用详解
Nov 07 Javascript
JavaScript Date对象功能与用法学习记录
Apr 28 Javascript
JavaScript如何实现图片处理与合成
May 29 Javascript
关于angular浏览器兼容性问题的解决方案
Jul 26 Javascript
Vue项目打包编译优化方案
Sep 16 Javascript
JavaScript中遍历的十种方法总结
Dec 15 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
PHP URL地址获取函数代码(端口等) 推荐
2010/05/15 PHP
浅析PHP substr,mb_substr以及mb_strcut的区别和用法
2013/06/21 PHP
ThinkPHP的cookie和session冲突造成Cookie不能使用的解决方法
2014/07/01 PHP
PHP实现用户登录的案例代码
2018/05/10 PHP
php中访问修饰符的知识点总结
2019/01/27 PHP
javascript 进阶篇2 CSS XML学习
2012/03/14 Javascript
JavaScript中访问节点对象的方法有哪些如何使用
2013/09/24 Javascript
简单的Jquery全选功能
2013/11/07 Javascript
Json序列化和反序列化方法解析
2013/12/19 Javascript
Javascript 遍历页面text控件详解
2014/01/06 Javascript
JavaScript基于setTimeout实现计数的方法
2015/05/08 Javascript
使用AngularJS实现可伸缩的页面切换的方法
2015/06/19 Javascript
Javascript 计算字符串在localStorage中所占字节数
2015/10/21 Javascript
javascript for-in有序遍历json数据并探讨各个浏览器差异
2015/11/30 Javascript
jquery.validate提示错误信息位置方法
2016/01/22 Javascript
动态加载js、css的实例代码
2016/05/26 Javascript
jQuery实现自动调用和触发某个事件的方法
2016/11/18 Javascript
js实现延迟加载的几种方法
2017/04/24 Javascript
理解nodejs的stream和pipe机制的原理和实现
2017/08/12 NodeJs
详解Angular5 路由传参的3种方法
2018/04/28 Javascript
Vue 组件传值几种常用方法【总结】
2018/05/28 Javascript
微信小程序项目实践之验证码倒计时功能
2018/07/18 Javascript
vue配置接口域名方法总结
2019/05/12 Javascript
JS常见错误(Error)及处理方案详解
2020/07/02 Javascript
利用python微信库itchat实现微信自动回复功能
2017/05/18 Python
从DataFrame中提取出Series或DataFrame对象的方法
2018/11/10 Python
python异常处理和日志处理方式
2019/12/24 Python
马来西亚领先的在线礼品店:Giftr
2018/08/23 全球购物
聚网科技C++面试笔试题
2015/09/01 面试题
员工考核评语大全
2014/04/26 职场文书
2015年实习单位评语
2015/03/25 职场文书
社区党务工作总结2015
2015/05/19 职场文书
培训简讯范文
2015/07/20 职场文书
七年级上册生物的课件
2019/08/07 职场文书
带你了解CSS基础知识,样式
2021/07/21 HTML / CSS
centos环境下nginx高可用集群的搭建指南
2022/07/23 Servers