In the position method of jquery, the official statement is as follows:
Get the current coordinates of the the ' the ' of the ' the ' the ' the ' of the ' matched elements, relative to the offset parent. The. Position () method allows the "us to retrieve" current position of the "an" element relative to the offset parent. Contrast this and. 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 () are the more useful . JQuery does not support getting the position coordinates to hidden elements or accounting for borders, margins, or Paddin G set on the BODY element.
The approximate meaning is to get the distance of the matching element relative to the most recently positioned parent, and return the left and top values.
In CSS, there is a positioning attribute is special, that is, fixed properties (fixed), the invariant element is relative to the document, and the distance of the page scrolling is irrelevant. This, before the 1.9 version of jquery, has 2 different interpretations than the 1.9 version. The difference is not pointed out in the official jquery Upgrade guide, where you can throw a diamond.
jquery 1.9 Version Test:
<!doctype html>
<meta charset= "UTF-8" >
<title>jquery 1.9</title>
<script src= "/libs/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>
<body style= "height:2500px;" >
<input type= "button" value= "obtains fixed top value" 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>
jquery 1.7 Version test:
<!doctype html>
<meta charset= "UTF-8" >
<title>jquery 1.7</title>
<script src= "H/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>
<body style= "height:2500px;" >
<input type= "button" value= "obtains fixed top value" 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>
You can pull the scroll bar test, return the value, only jquery 1.9 is correct. So how do you get the right results in the jquery 1.7 version? Use the current Position.top-window.scrolltop value, which is the correct result.
<!doctype html>
<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 is relatively high-scroll bar height
alert (' position.top= ' + ($pos. Position (). top-$ (window). scrolltop ()) + ' \ n '
+ ' css.top= ' + $pos. CSS (' top ');
});
});
</script>
<body style= "height:2500px;"
<input type= "button" value= "obtains the fixed top value" 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>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
