Posted by & filed under Uncategorized.

About wangcui

wangcui wangcui has written 13 post in this blog.

转载于http://qianduanblog.com/post/jquery-1-7-and-1-9-position-position-fixed.html

在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升级指南里指出来,这里就抛钻引玉一下下啦。

jquery 1.9版本测试:

  1. <!doctype html>
  2. <htmllang=“en”>
  3. <head>
  4. <metacharset=“UTF-8”>
  5. <title>jquery 1.9</title>
  6. <scriptsrc=“http://upcdn.b0.upaiyun.com/libs/jquery/jquery-1.9.0.min.js”></script>
  7. <script>
  8. $(function()
  9. {
  10. var $pos=$(‘#pos’);
  11. $(‘#btn’).click(function()
  12. {
  13. alert(‘position.top=’+$pos.position().top+‘\n’
  14. +‘css.top=’+$pos.position().top);
  15. });
  16. });
  17. </script>
  18. </head>
  19. <bodystyle=height:2500px;>
  20. <inputtype=“button”value=“获得fixed的top值”id=“btn”style=position:fixed;left:0px;top:0px;>
  21. <divid=“pos”style=position:fixed;left:10px;top:100px;width:100px;height:100px;border:3px solid #eee;></div>
  22. </body>
  23. </html>

jquery 1.7版本测试:

  1. <!doctype html>
  2. <htmllang=“en”>
  3. <head>
  4. <metacharset=“UTF-8”>
  5. <title>jquery 1.7</title>
  6. <scriptsrc=“http://upcdn.b0.upaiyun.com/libs/jquery/jquery-1.7.2.min.js”></script>
  7. <script>
  8. $(function()
  9. {
  10. var $pos=$(‘#pos’);
  11. $(‘#btn’).click(function()
  12. {
  13. alert(‘position.top=’+$pos.position().top+‘\n’
  14. +‘css.top=’+$pos.css(‘top’));
  15. });
  16. });
  17. </script>
  18. </head>
  19. <bodystyle=height:2500px;>
  20. <inputtype=“button”value=“获得fixed的top值”id=“btn”style=position:fixed;left:0px;top:0px;>
  21. <divid=“pos”style=position:fixed;left:10px;top:100px;width:100px;height:100px;border:3px solid #eee;></div>
  22. </body>
  23. </html>

您可以拉动滚动条测试,返回的值,只有jquery 1.9是正确的。那么如何在jquery 1.7版本也获得正确的结果呢?使用当前的position.top-window.scrollTop值,即为正确的结果。

  1. <!doctype html>
  2. <htmllang=“en”>
  3. <head>
  4. <metacharset=“UTF-8”>
  5. <title>jquery 1.7</title>
  6. <scriptsrc=“http://upcdn.b0.upaiyun.com/libs/jquery/jquery-1.7.2.min.js”></script>
  7. <script>
  8. $(function()
  9. {
  10. var $pos=$(‘#pos’);
  11. $(‘#btn’).click(function()
  12. {
  13. // 1.7的相对高-滚动条高度
  14. alert(‘position.top=’+($pos.position().top$(window).scrollTop())+‘\n’
  15. +‘css.top=’+$pos.css(‘top’));
  16. });
  17. });
  18. </script>
  19. </head>
  20. <bodystyle=height:2500px;>
  21. <inputtype=“button”value=“获得fixed的top值”id=“btn”style=position:fixed;left:0px;top:0px;>
  22. <divid=“pos”style=position:fixed;left:10px;top:100px;width:100px;height:100px;border:3px solid #eee;></div>
  23. </body>
  24. </html>

【完】

Leave a Reply

  • (will not be published)