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>

本站文章均為深正網站建設摘自權威資料,書籍,或網絡原創文章,如有版權糾紛或者違規問題,請即刻聯系我們刪除,我們歡迎您分享,引用和轉載,但謝絕直接搬磚和抄襲!感謝...
關注深正互聯
我們猜你喜歡
七星彩头尾 五年级的学生怎么赚钱 捕鱼达人3攻略技巧攻略汇总 点广告赚钱骗局诺比邻 期货有赚钱 比空调安装赚钱的职业 用手机零投资怎么赚钱 下载打麻将免费游戏 缝纫生意做什么赚钱 微信捕鱼怎么玩高分 哪些公司用免费模式赚钱了 九阴怎么赚钱快 找了一个不会赚钱的老公 新闻头条赚钱太慢了 武汉琴行赚钱吗 什么视频赚钱最快的速度 好友赣南麻将下载