I have a fixed div set at the top of the browser window, with z-index:2, and with text in this div.
My website page is a single page at z-index:1, and with multiple "<section id=...>" sections in it for each website "page".
I'm using javascript and jquery to display each section id for the user, and for the requested section to come up flush with the bottom of the top fixed div.
For this, I am using the statement:
$('html, body').animate({scrollTop: $('#sectionid').offset().top-xx)}, 0);
- where "xx" above is a number.
I can manually edit and change the "xx" number in my program to set the page section to whatever top I need, and this all works fine.
However, I am also using; "$(window).on('resize', function() { .." in my program, to reset/recalculate the section top to match the bottom of the fixed div. This is because the fixed div changes in height whenever the browser window is re-sized by the user. That is, the text in the fixed div will re-flow onto the next line when the browser window is made smaller etc..
So I tried using a variable name for the "top-xx" value, such as ".offset().top-myPageTop". But this does not work and the sectionid top always lands on "top-0" under the fixed div.
After much trial & error, I came up with this solution:
$('html, body').animate({scrollTop: eval('$('#sectionid').offset().top-' + myPageTop)}, 0);
- where "myPageTop" is a variable that is set/reset by the "$(window).on('resize'.." function mentioned above.
For my website, the above last jquery statement works just fine. But I am left wondering that maybe this is not really the correct way of doing this. I have looked through the jquery documentation and searched this site (and others), but I could not find much on using "top-xx" with a variable name in the above statement. Is there a better way of doing this?