jquery 怎么捕捉div到浏览器边缘距离？

我想实现点击div，让.follow的位置靠齐到该div的左上方，应该怎么做？下面的代码不完善，谁帮忙看看。
在firefox下使用。
<script type="text/javascript" src="http://localhost/leb/auto/js/jquery-latest.js"></script>
<script type="text/javascript">
$("div").click(function(e){
var top_val=???;  // 怎么捕捉点中的div的左边缘和上边缘到浏览器边缘的距离
var left_val=???;
$(".follow").css({top:top_val,left:left_val});
});
</script> 
<style type="text/css">
.test1{margin:200px; background-color: green;}
.test2{margin:250px; background-color: yellow;}
.follow{position: fixed;}
</style><div class="test1">
当点击div时，在这个div上方出现.follow div。
</div>
<div class="test2">
当点击div时，在这个div上方出现.follow div。
</div>
<div class="follow" style="display:none;">跟随用的div</div>

解决方案 »

  1.   


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>无标题文档</title>
    <style type="text/css">
    p {margin:0;font-size:12px;line-height:26px;}
    .test1{margin:200px; background-color: green;}
    .test2{margin:250px; background-color: yellow;}
    .follow{position: absolute;}
    </style>
    </head>
     
    <body><div class="test1">
    当点击div时，在这个div上方出现.follow div。
    </div>
    <div class="test2">
    当点击div时，在这个div上方出现.follow div。
    </div>
    <div class="follow" style="display:none;">跟随用的div</div></body>
    </html><script type="text/javascript" src="http://localhost/leb/auto/js/jquery-latest.js"></script>
    <script type="text/javascript">
        $('div').click(function(event) {
            var offset = $(event.target).offset();
            offset.top -= $('.follow').height();
            $(".follow").css(offset).show();
        });
    </script>