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知识点收藏
Feb 22 Javascript
JS关闭窗口与JS关闭页面的几种方法小结
Dec 17 Javascript
JavaScript计算两个日期时间段内日期的方法
Mar 16 Javascript
JQuery select(下拉框)操作方法汇总
Apr 15 Javascript
jQuery实现鼠标滑过链接控制图片的滑动展开与隐藏效果
Oct 28 Javascript
Bootstrap精简教程中秋大放送
Sep 15 Javascript
JS Canvas定时器模拟动态加载动画
Sep 17 Javascript
JS常见创建类的方法小结【工厂方式,构造器方式,原型方式,联合方式等】
Apr 01 Javascript
微信小程序实现顶部普通选项卡效果(非swiper)
Jun 19 Javascript
JS实现的base64加密解密操作示例
Apr 18 Javascript
Jquery属性的获取/设置及样式添加/删除操作技巧分析
Dec 23 jQuery
vue实现导航标题栏随页面滚动渐隐渐显效果
Mar 12 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 彩色文字实现代码
2009/06/29 PHP
ThinkPHP的RBAC(基于角色权限控制)深入解析
2013/06/17 PHP
PHP中的日期加减方法示例
2014/08/21 PHP
php在windows环境下获得cpu内存实时使用率(推荐)
2018/02/08 PHP
Laravel框架查询构造器简单示例
2019/05/08 PHP
新浪中用来显示flash的函数
2007/04/02 Javascript
基于jquery的网页SELECT下拉框美化代码
2010/10/28 Javascript
Js nodeType 属性全面解析
2013/11/14 Javascript
jQuery 计算iframe 窗口大小的方法
2014/05/13 Javascript
做web开发 先学JavaScript
2014/12/12 Javascript
Google Maps基础及实例解析
2016/08/06 Javascript
Bootstrap.css与layDate日期选择样式起冲突的解决办法
2017/04/07 Javascript
js实现倒计时关键代码
2017/05/05 Javascript
JS中的三个循环小结
2017/06/20 Javascript
Vue编写多地区选择组件
2017/08/21 Javascript
react中hook介绍以及使用教程
2020/12/11 Javascript
[03:10]2014DOTA2 TI马来劲旅Titan首战告捷目标只是8强
2014/07/10 DOTA
Python爬虫框架Scrapy安装使用步骤
2014/04/01 Python
python获取当前日期和时间的方法
2015/04/30 Python
详解Python中最难理解的点-装饰器
2017/04/03 Python
python实现简单遗传算法
2018/03/19 Python
用python处理MS Word的实例讲解
2018/05/08 Python
python 直接赋值和copy的区别详解
2019/08/07 Python
wxPython色环电阻计算器
2019/11/18 Python
学Python 3的理由和必要性
2019/11/19 Python
Python文本处理简单易懂方法解析
2019/12/19 Python
大专应届生个人简历的自我评价
2013/10/15 职场文书
银行会计业务的个人自我评价
2013/11/02 职场文书
大学生村官典型材料
2014/01/12 职场文书
卖车协议书
2014/04/21 职场文书
本科毕业生自荐信
2014/05/26 职场文书
元旦趣味活动方案
2014/08/22 职场文书
2014年“世界无车日”活动方案
2014/09/21 职场文书
孙振耀退休感言
2015/08/01 职场文书
中学总务处工作总结
2015/08/12 职场文书
Python可视化神器pyecharts绘制水球图
2022/07/07 Python