jquery1.7和1.9的position方法对固定(fixed)元素的区别

2016-11-21 1262 0 编辑:网站前端设计伍林 来源:网站设计书籍

在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>

本站文章均为深正网站建设摘自权威资料,书籍,或网络原创文章,如有版权纠纷或者违规问题,请即刻联系我们删除,我们欢迎您分享,引用和转载,但谢绝直接搬砖和抄袭!感谢...
关注深正互联