Offset doesn't work correct inside position fixed element when body is scrolled

[Aandriy]

Offset doesn't work correct inside position fixed element when body is scrolled https://jsfiddle.net/b7y0aeo3/2/

<header> <div id="offset">jQuery offset depends on body scroll position</div> <hr /> <button id="btn"> <b>$btn</b><hr /> jQuery Bug (offset and position fixed). Click to see. </button> </header> <main></main>

(function($){ function randomInteger(min, max) { var rand = min - 0.5 + Math.random() * (max - min + 1) rand = Math.round(rand); return rand; } $(function(){ $('#btn').on('click',function(){ var $btn = $(this); $('html, body').animate({scrollTop:randomInteger(0,3000)}, '500',function(){ var offset = $btn.offset(); str = '$btn.offset().top = ' + offset.top+ "\r\n" +'$btn.offset().left = '+offset.left; $('#offset').text(str); }); }); }); })(jQuery)

header{ position: fixed; left: 0; top: 0; width: 100%; min-height: 100px; padding:30px; text-align: center; background: rgba(0,0,0,0.9); color:#fff; }

offset {

white-space: pre-line; display: table; margin: 0 auto; text-align: left; } main { display: block; height: 5000px; width: 10px; background: #c0e; margin:0 auto; }

[scottgonzalez]

This is a WordPress template. You want the jQuery bug tracker: https://github.com/jquery/jquery/issues