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开发规范要求(规范化代码)
Aug 16 Javascript
EXTJS记事本 当CompositeField遇上RowEditor
Jul 31 Javascript
JavaScript 验证码的实例代码(附效果图)
Mar 22 Javascript
jQuery mobile类库使用时加载导航历史的方法简介
Dec 04 Javascript
JS基于构造函数实现的菜单滑动显隐效果【测试可用】
Jun 21 Javascript
jquery在启动页面时,自动加载数据的实例
Jan 22 jQuery
详解vue-cli 构建项目 vue-cli请求后台接口 vue-cli使用axios、sass、swiper
May 28 Javascript
基于Vue+elementUI实现动态表单的校验功能(根据条件动态切换校验格式)
Apr 04 Javascript
理理Vue细节(推荐)
Apr 16 Javascript
JavaScript Array对象基本方法详解
Sep 03 Javascript
使用JavaScript通过前端发送电子邮件
May 22 Javascript
解决Vue @submit 提交后不刷新页面问题
Jul 18 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
Zend 输出产生XML解析错误
2009/03/03 PHP
Yii视图CGridView列表用法实例分析
2016/07/12 PHP
Prototype使用指南之range.js
2007/01/10 Javascript
Javascript Jquery 遍历Json的实现代码
2010/03/31 Javascript
IE无法设置短域名下Cookie
2010/09/23 Javascript
13 款最热门的 jQuery 图像 360 度旋转插件推荐
2014/12/09 Javascript
超漂亮的jQuery图片轮播特效
2015/11/24 Javascript
JS中dom0级事件和dom2级事件的区别介绍
2016/05/05 Javascript
js改变css样式的三种方法推荐
2016/06/28 Javascript
jQuery居中元素scrollleft计算方法示例
2017/01/16 Javascript
详解Angularjs 自定义指令中的数据绑定
2018/07/19 Javascript
实现elementUI表单的全局验证的方法步骤
2019/04/29 Javascript
JavaScript遍历数组的方法代码实例
2020/01/14 Javascript
python访问mysql数据库的实现方法(2则示例)
2016/01/06 Python
Python实现信用卡系统(支持购物、转账、存取钱)
2016/06/24 Python
python网络编程调用recv函数完整接收数据的三种方法
2017/03/31 Python
Python向MySQL批量插数据的实例讲解
2018/03/31 Python
详解python 爬取12306验证码
2019/05/10 Python
解决django后台样式丢失,css资源加载失败的问题
2019/06/11 Python
Python中的正则表达式与JSON数据交换格式
2019/07/03 Python
Django工程的分层结构详解
2019/07/18 Python
Python3 Tkinkter + SQLite实现登录和注册界面
2019/11/19 Python
Pycharm在指定目录下生成文件和删除文件的实现
2020/12/28 Python
css3实现椭圆轨迹旋转的示例代码
2018/10/29 HTML / CSS
英国亚马逊官方网站:Amazon.co.uk
2019/08/09 全球购物
美国电子产品购物网站:BuyDig.com
2020/06/17 全球购物
用C#语言写出在本地创建一个UDP接收端口的具体过程
2016/02/22 面试题
大学生优秀的自我评价分享
2013/10/22 职场文书
写给妈妈的道歉信
2014/01/11 职场文书
股份合作协议书范本
2014/04/14 职场文书
2014迎国庆标语大全
2014/09/19 职场文书
中学生的1000字检讨书
2014/10/11 职场文书
2015年英语教学工作总结
2015/05/25 职场文书
幼儿园新学期开学寄语
2015/05/27 职场文书
人事行政部各岗位职责说明书!
2019/07/15 职场文书
MySQL表的增删改查基础教程
2021/04/07 MySQL