你的位置:首页 > Java教程

[Java教程]跟随滚动条滚动的div代码实例


跟随滚动条滚动的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/