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日期对象的dateAdd与dateDiff方法
Nov 18 Javascript
JQuery操作表格(隔行着色,高亮显示,筛选数据)
Feb 23 Javascript
jQuery+HTML5+CSS3制作支持响应式布局时间轴插件
Aug 10 Javascript
JS实现的图片预览插件与用法示例【不上传图片】
Nov 25 Javascript
详解Vue监听数据变化原理
Mar 08 Javascript
基于jQuery实现文字打印动态效果
Apr 21 jQuery
Vue2.0结合webuploader实现文件分片上传功能
Mar 09 Javascript
vue设计一个倒计时秒杀的组件详解
Apr 06 Javascript
vue-cli 3.x配置跨域代理的实现方法
Apr 12 Javascript
webpack4 配置 ssr 环境遇到“document is not defined”
Oct 24 Javascript
微信小程序 scroll-view 实现锚点跳转功能
Dec 12 Javascript
基于Electron实现桌面应用开发代码实例
Jul 07 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设计模式 Mediator (中介者模式)
2011/06/26 PHP
第二章 PHP入门基础之php代码写法
2011/12/30 PHP
PHP6新特性分析
2016/03/03 PHP
PHP简单实现生成txt文件到指定目录的方法
2016/04/25 PHP
PHP面向对象之里氏替换原则简单示例
2018/04/08 PHP
Swoole源码中如何查询Websocket的连接问题详解
2020/08/30 PHP
jquery使用ColorBox弹出图片组浏览层实例演示
2013/03/14 Javascript
javascript在IE下trim函数无法使用的解决方法
2014/09/12 Javascript
百度地图给map添加右键菜单(判断是否为marker)
2016/03/04 Javascript
浅析JS中对函数function的理解(基础篇)
2016/10/14 Javascript
Angular企业级开发——MVC之控制器详解
2017/02/20 Javascript
jQuery中clone()函数实现表单中增加和减少输入项
2017/05/13 jQuery
JS中的两种数据类型及实现引用类型的深拷贝的方法
2018/08/12 Javascript
echarts浮动显示单位的实现方法示例
2020/12/04 Javascript
[55:04]海涛DOTA2死魂复燃6.82版本介绍
2014/09/28 DOTA
Python中用startswith()函数判断字符串开头的教程
2015/04/07 Python
Python实现的数据结构与算法之快速排序详解
2015/04/22 Python
详细解析Python中的变量的数据类型
2015/05/13 Python
python实现的文件同步服务器实例
2015/06/02 Python
Python实现各种排序算法的代码示例总结
2015/12/11 Python
python套接字流重定向实例汇总
2016/03/03 Python
Python 将Matrix、Dict保存到文件的方法
2018/10/30 Python
python之验证码生成(gvcode与captcha)
2019/01/02 Python
详解python实现小波变换的一个简单例子
2019/07/18 Python
学习Django知识点分享
2019/09/11 Python
Python容器使用的5个技巧和2个误区总结
2019/09/26 Python
详解Python中的路径问题
2020/09/02 Python
python自动生成证件号的方法示例
2021/01/14 Python
css3 给背景设置渐变色的方法
2019/09/12 HTML / CSS
Skyscanner台湾:全球知名的旅行比价引擎
2018/07/01 全球购物
婴儿鞋,独特的婴儿服装和配件:Zutano
2018/11/03 全球购物
PyQt QMainWindow的使用示例
2021/03/24 Python
生态学毕业生自荐信
2013/10/27 职场文书
详解Python小数据池和代码块缓存机制
2021/04/07 Python
测量JavaScript函数的性能各种方式对比
2021/04/27 Javascript
redis缓存存储Session原理机制
2021/11/20 Redis