在jquery的position方法，官方是这样说明的：
Get the current coordinates of the first element in the set of matched elements, relative to the offset parent.The .position() method allows us to retrieve the current position of an element relative to the offset parent. Contrast this with .offset(), which retrieves the current position relative to the document. When positioning a new element near another one and within the same containing DOM element, .position() is the more useful.jQuery does not support getting the position coordinates of hidden elements or accounting for borders, margins, or padding set on the body element.
大致意思是获得匹配元素相对于最近定位父级的距离，返回left、top值。
在CSS中有一个定位属性是比较特殊的，那就是固定属性（fixed），固定元素是相对于文档的，与页面滚动的距离无关。这一点，在jquery的1.9版本之前与1.9版本是有2种不同的解释的。
jquery 1.9版本测试：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>jquery 1.9</title>
<script src="jquery/jquery-1.9.0.min.js"></script>
<script>
$(function()
{
var $pos=$('#pos');
$('#btn').click(function()
{
alert('position.top='+$pos.position().top+'\n'
+'css.top='+$pos.position().top);
});
});
</script>
</head>
<body style="height:2500px;">
<input type="button" value="获得fixed的top值" id="btn" style="position:fixed;left:0px;top:0px;">
<div id="pos" style="position:fixed;left:10px;top:100px;width:100px;height:100px;border:3px solid #eee;"></div>
</body>
</html>
jquery 1.7版本测试：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>jquery 1.7</title>
<script src="http://upcdn.b0.upaiyun.com/libs/jquery/jquery-1.7.2.min.js"></script>
<script>
$(function()
{
var $pos=$('#pos');
$('#btn').click(function()
{
alert('position.top='+$pos.position().top+'\n'
+'css.top='+$pos.css('top'));
});
});
</script>
</head>
<body style="height:2500px;">
<input type="button" value="获得fixed的top值" id="btn" style="position:fixed;left:0px;top:0px;">
<div id="pos" style="position:fixed;left:10px;top:100px;width:100px;height:100px;border:3px solid #eee;"></div>
</body>
</html>
您可以拉动滚动条测试，返回的值，只有jquery 1.9是正确的。那么如何在jquery 1.7版本也获得正确的结果呢？使用当前的position.top-window.scrollTop值，即为正确的结果。
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>jquery 1.7</title>
<script src="jquery/jquery-1.7.2.min.js"></script>
<script>
$(function()
{
var $pos=$('#pos');
$('#btn').click(function()
{
// 1.7的相对高-滚动条高度
alert('position.top='+($pos.position().top-$(window).scrollTop())+'\n'
+'css.top='+$pos.css('top'));
});
});
</script>
</head>
<body style="height:2500px;">
<input type="button" value="获得fixed的top值" id="btn" style="position:fixed;left:0px;top:0px;">
<div id="pos" style="position:fixed;left:10px;top:100px;width:100px;height:100px;border:3px solid #eee;"></div>
</body>
</html>
猜你喜欢
联络方式：
深圳 · 龙岗 · 大运软件小镇22栋201
电话：400 182 8580
邮箱：szhulian@qq.com
