标签：
跟随滚动条滚动的div代码实例:
有时候我们希望当滚动网页滚动条的时候，div能够随着滚动条而滚动，这样就能够基本保持处于它相对于窗口所在的位置，下面是一段代码实例，基本实现了此功能，不过还是有不足之处，就是当拖动滚动条的时候，具有抖动的情况，也算差强人意吧。
代码实例如下:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>div随着滚动条滚动效果-蚂蚁部落</title> <style type="text/css"> #editInfo{ float:left; width:300px; background-color:#ccc; position:absolute; top:200px; left:320px; } </style> <script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.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> </head> <body> <div id="editInfo"> <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 style="height:1500px"></div> </body> </html>
以上代码实现了我们需要的效果，当然效果有瑕疵，不过基本满足了要求，实现的原理也非常的简单，当拖动滚动条的时候，会触发window的scroll()事件，在事件处理函数中，分别获取向上和向左滚动的尺寸，然后再加上div的原来的top和left属性值，最后分别将top和left作为div的top和left属性值，这样就实现了div跟随滚动条滚动的效果。
原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=8526
更多内容可以参阅:http://www.softwhy.com/jquery/
标签：
原文地址：http://www.cnblogs.com/softwhy/p/5079652.html
