My website has a fixed header that expands to reveal more content when a button is clicked. However, I noticed that if the page has been scrolled down before clicking the button, the scroll position resets to the top of the page.
To see this issue in action, I created a jsfiddle: http://jsfiddle.net/YeW9L/
$(document).ready(function () {
$('.action').click(function () {
$('#border').animate({
height: 200
}, 400);
});
});
I initially thought that making the header fixed would remove it from the document flow, but changing its height seems to impact the rest of the page. Does anyone have a solution for keeping the scroll position intact when expanding the header, regardless of where you are on the page?
Thank you