2. Algorithm
  3. javascript - jQuery.offset() on <body> element provides incorrect "top" value - Stack Overflow

javascript - jQuery.offset() on <body> element provides incorrect "top" value - Stack Overflow

admin2025-04-20  0

FIDDLE IS HERE (logs to console)

The situation is when the page starts out with a <H1> that has a margin-top greater than the margin found on <body>.

This causes the <body> to be pushed lower in the page yet $('body').offset().top remains set to the <body>'s margin-top. This of course causes my debug element (which highlights the position of elements) to be incorrect since the body's dummy element is now in the wrong position.

Curiously the rest of the $(elem).offset() values are correct for any descendant of <body>.

Is there a fix for this short of manually checking the margin-top of the recursively first childs of body with a while loop?

Noticing the issue on Safari 6 though I suspect I'll find it on Chrome as well.

FIDDLE IS HERE (logs to console)

The situation is when the page starts out with a <H1> that has a margin-top greater than the margin found on <body>.

This causes the <body> to be pushed lower in the page yet $('body').offset().top remains set to the <body>'s margin-top. This of course causes my debug element (which highlights the position of elements) to be incorrect since the body's dummy element is now in the wrong position.

Curiously the rest of the $(elem).offset() values are correct for any descendant of <body>.

Is there a fix for this short of manually checking the margin-top of the recursively first childs of body with a while loop?

Noticing the issue on Safari 6 though I suspect I'll find it on Chrome as well.

  • javascript
  • jquery
  • html
  • css
Share Improve this question edited Jan 4, 2013 at 4:29 BoltClock 725k165 gold badges1.4k silver badges1.4k bronze badges asked Jan 4, 2013 at 4:16 Steven LuSteven Lu 43.7k63 gold badges219 silver badges382 bronze badges 5
  • Can you simply change the margin-top of body to match its children? – BoltClock Commented Jan 4, 2013 at 4:26
  • Why would the margin-top on the H1 effect the offset position of the body? I see that Google highlights the body tag as just the header tag, but that appears to be a rendering issue on Chromes developer. – teynon Commented Jan 4, 2013 at 4:26
  • @BoltClock probably. I'm working on a general purpose JS library, not a specific page. So my code is intended to be very flexible. – Steven Lu Commented Jan 4, 2013 at 4:27
  • @Tom because the height reported by $('body').outerHeight (and height() and innerHeight()) is the height of the body which does NOT include the H1's margin-top. – Steven Lu Commented Jan 4, 2013 at 4:28
  • Not really a solution, but from jQuery: Note: jQuery does not support getting the offset coordinates of hidden elements or accounting for borders, margins, or padding set on the body element. – teynon Commented Jan 4, 2013 at 4:37
Add a ment  | 

4 Answers 4

Reset to default 2

It might work to use the offset plus the difference of the height of the html element minus the body element.

console.log("body.offset().top = "+ ($('html').offset().top + $('html').height() - $('body').height()));

Update: This solution will only work if there is not a margin-bottom on the page.

You could additionally add a clear div at the bottom of the page.

$('body').append("<div style=\"clear: all;\">&nbsp;</div>");

Note that the div must have content to work.

http://jsfiddle/SCGdZ/7/

I found a John Resig post about how fast and awesome getBoundingClientRect is here... I wonder why it is not used for jQuery's offset()!

I shall use this method instead and hopefully it will not suffer from this same issue.

Update: Looks good! (the non integer top value is due to the somehow having style -webkit-margin-before: 0.67em;)

You can see that the body has margin=8

jQuery 1.9.0 has addressed this issue. Thanks so much, jQuery is awesome.

Find Here

a[0].style.marginTop it remains uninitialized even after declaring it in css that's why it was returning nothing.

Therefore we must take care of initializing a[0].style.marginTop

转载请注明原文地址:http://conceptsofalgorithm.com/Algorithm/1745125748a286415.html

javascriptjQueryoffset() on ltbodygt element provides incorrect quottopquot valueStack Overflow

最新回复(0)