Jquery offset().top returns incorrect value on resize

208
January 27, 2018, at 1:59 PM

BLUF: On page resize, jQuery no longer returns the correct values for offset or position, causing scrolling to not function properly.

On page load and when the page is resized, this code is executed:

$.each(bodies,function(key,val){
    val.scroll = ($("#main"+val.id).position().top-layout.header.height);
});

I have also used offset:

$.each(bodies,function(key,val){
    val.scroll = ($("#main"+val.id).offset().top-layout.header.height);
});

After resizing the window, both offset and position return the wrong value. However, when the page is resized when the page is scrolled all the way to the top, everything works again.

After calculating the scroll positions, elements are scrolled to using:

$("#viewport").animate({scrollTop:body.scroll},function(){
    $("#headerText").html(body.name);
});

It's worth noting that I'm using a fixed header at the top of the page

I've had this problem for weeks now and have scoured the web for solutions

Edit: Problem circumvented by calculating the desired scroll position instead of using offset or position.

READ ALSO
JQuery toggle/html: changing the content in div

JQuery toggle/html: changing the content in div

I'm currently working on a blog layout with a main div and a side bar with linksI want each link to change the content of the main div

210
jQuery animate only change what is asked for?

jQuery animate only change what is asked for?

I'm running this function and it works, but it changes more than I want

208
window.location.replace not working in JavaScript

window.location.replace not working in JavaScript

Based on my JavaScript code, windowlocation doesn't work after receiving true response

278
Inserting elements to appended elements using JavaScript or jQuery

Inserting elements to appended elements using JavaScript or jQuery

I am fairly new to JS, and have created a little piece of script and it does exactly what I want which is find some elements then adds elements with data populated from via ajax

150