与我们合作
我们专注：网站策划设计、网络多媒体传播、网站优化及网站营销、品牌策略与设计
主营业务：网站建设、移动端微信小程序开发、VI设计、网络运营、云产品·运维解决方案
有一个品牌项目想和我们谈谈吗?
您可以填写右边的表格，让我们了解您的项目需求，这是一个良好的开始，我们将会尽快与您取得联系。当然也欢迎您给我们写信或是打电话，让我们听到您的声音
您也可通过下列途径与我们取得联系：
地 址: 深圳.龙岗区大运软件小镇11栋3楼
电 话: 138 2888 4598 / 138 0880 9053
网 址: http://www.appvx.cn
快速提交您的需求 ↓
在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>
本站文章均为深正网站建设摘自权威资料，书籍，或网络原创文章，如有版权纠纷或者违规问题，请即刻联系我们删除，我们欢迎您分享，引用和转载，但谢绝直接搬砖和抄袭！感谢...
