I have a sidebar that I want to behave like it's frozen on the right side of the pane even when the scroll bar moves the down to see more content. I gave up on it being perfectly fixed and handled it by the sidebar scrolling down with the page using jQuery. Currently this is how I'm handling this.
<script type="text/javascript">
$(window).scroll(function() {
$('#sidebarPage1').animate(
{ top: $(window).scrollTop() + 'px' },
{ queue: false, duration: 500, easing: 'easeInOutSine' }
);
});
</script>
I have a 100% wide header and footer on my page so the top of the sidebar is offset by about 150px from the top, when users have small viewports when they scroll entirely to the bottom the bar will end up going under my footer or if it's a really small view port entirely off the screen.
Would there be an easy way to calculate what to set top at, to have it stop approximately 200px from the bottom of the viewport so it doesn't crash through the footer?
Updated from Joel's answer:
<script type="text/javascript">
$(window).scroll(function() {
var dynamicSidebarHeight = $('#sidebar').height();
var fixedFooterOffset = 168;
var scrollTo = $(window).scrollTop()
var calculatedMaxTop = $('#footer').offset().top -
dynamicSidebarHeight - fixedFooterOffset;
if (scrollTo > calculatedMaxTop) {
scrollTo = calculatedMaxTop;
}
$('#sidebarPage1')
.animate(
{ top: scrollTo + 'px' },
{ queue: false, duration: 500, easing: 'easeInOutSine' }
);
});
</script>
Fixed .Height() function