Reputation: 1367
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
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