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 Ajax 学习实例2 向页面发出请求 返回JSon格式数据
Mar 15 Javascript
基于jquery的二级联动菜单实现代码
Apr 25 Javascript
js使用ajax读博客rss示例
May 06 Javascript
深入理解JavaScript系列(31):设计模式之代理模式详解
Mar 03 Javascript
Spring shiro + bootstrap + jquery.validate 实现登录、注册功能
Jun 02 jQuery
vue实现手机号码抽奖上下滚动动画示例
Oct 18 Javascript
webpack 单独打包指定JS文件的方法
Feb 22 Javascript
微信小程序实现商城倒计时
Nov 01 Javascript
解决在Vue中使用axios用form表单出现的问题
Oct 30 Javascript
es6中let和const的使用方法详解
Feb 24 Javascript
Vue中添加滚动事件设置的方法详解
Sep 14 Javascript
vue使用Google Recaptcha验证的实现示例
Aug 23 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
php字符编码转换之gb2312转为utf8
2013/10/28 PHP
PHP中ini_set与ini_get用法实例
2014/11/04 PHP
laravel5.1框架model类查询的实现方法
2019/10/08 PHP
基于jquery的自定义鼠标提示效果 jquery.toolTip
2010/11/14 Javascript
新鲜出炉的js tips提示效果
2011/04/03 Javascript
利用原生JavaScript获取元素样式只是获取而已
2014/10/08 Javascript
jQuery视差滚动效果网页实现方法经验总结
2016/09/29 Javascript
用Angular实时获取本地Localstorage数据,实现一个模拟后台数据登入的效果
2016/11/09 Javascript
vue实现百度搜索下拉提示功能实例
2017/06/14 Javascript
JS使用ActiveXObject实现用户提交表单时屏蔽敏感词功能
2017/06/20 Javascript
Bootstrap弹出框之自定义悬停框标题、内容和样式示例代码
2017/07/11 Javascript
js正则相关知识点专题
2018/05/10 Javascript
puppeteer实现html截图的示例代码
2019/01/10 Javascript
微信自定义分享链接信息(标题,图片和内容)实现过程详解
2019/09/04 Javascript
JS如何实现在弹出窗口中加载页面
2020/12/03 Javascript
python用ConfigObj读写配置文件的实现代码
2013/03/04 Python
Python获取apk文件URL地址实例
2013/11/01 Python
Python 自动补全(vim)
2014/11/30 Python
Python 获得13位unix时间戳的方法
2017/10/20 Python
python使用SMTP发送qq或sina邮件
2017/10/21 Python
使用Python实现在Windows下安装Django
2018/10/17 Python
Python3使用腾讯云文字识别(腾讯OCR)提取图片中的文字内容实例详解
2020/02/18 Python
Scrapy 配置动态代理IP的实现
2020/09/28 Python
HTML5基于flash实现播放RTMP协议视频的示例代码
2020/12/04 HTML / CSS
英国的屈臣氏:Boots博姿
2017/12/23 全球购物
电大毕业生自我鉴定
2014/04/10 职场文书
2014年五一劳动节社区活动总结
2014/04/14 职场文书
装修协议书范本
2014/04/21 职场文书
《夕阳真美》教学反思
2014/04/27 职场文书
电子商务专业应届生求职信
2014/05/28 职场文书
小区推广策划方案
2014/06/06 职场文书
教师党员个人自我剖析材料
2014/09/29 职场文书
2015年前台文员工作总结
2015/05/18 职场文书
母亲去世追悼词
2015/06/23 职场文书
如何使用JavaScript策略模式校验表单
2021/04/29 Javascript
Redis数据结构之链表与字典的使用
2021/05/11 Redis