Cream Whipped Airplane
Cream Whipped Airplane

Reputation: 1367

Get offset().top of element from the top of the window after being already scrolled within the page

Upon page load I use

agenda_top = $('#agenda').offset().top;
travel_top = $('#travel').offset().top;
hotel_top =$('#hotel').offset().top;

to store position of the main section within the page. and then I use those for navigation. eg. $('#anchor').animate({ scrollTop: hotel_top }, 'ease'); and #anchor is <body>.

The issue is that on the page there is an expandable table and with each row expanded the positions I stored initially become inaccurate. I would like to have a function that I could call when I open a row, that would recalculate the offsets. I tried calling the same function I use on page load, but because I am not at the top of the page when I call it the retrieved offsets are wrong.

I somehow need to get the offset of the elements #travel and #hotel from the top of the document perspective. Is that possible?

Here's some numbers. When the page load the offset().top for #hotel is 2637 after I open the row which moves the #hotel element even further from top I do offset().top again but this time it returns 2059 but it should be MORE not less than the original number since the div is now expanded. This is when I'm scrolled within the browser window. But if I manually scroll to the top of the window, then do hotel_top =$('#hotel').offset().top; I get 3137 which is the correct nuber, but I dont know hot to get this number while being scrolled within the page..

Upvotes: 0

Views: 900

Answers (1)

Cream Whipped Airplane
Cream Whipped Airplane

Reputation: 1367

solved this by taking the scrollbars position into account, so when I expand a div I recalculate the positions like this position = element.offset().top + $(window).scrollTop(); I am actually not using window because it returns 0 for scrollTop() but I have a div that wraps all of the content right after <body> and I use that. Works flawlessly.

Upvotes: 1

Related Questions