jquery1.7和1.9的position方法對固定(fixed)元素的區別

2016-11-21 1413 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>

本站文章均為深正網站建設摘自權威資料,書籍,或網絡原創文章,如有版權糾紛或者違規問題,請即刻聯系我們刪除,我們歡迎您分享,引用和轉載,但謝絕直接搬磚和抄襲!感謝...
關注深正互聯
我們猜你喜歡
七星彩头尾