I was wondering how I can fix a div to the bottom of the window as it scrolls out of view. I know you can do it with twitter bootstrap but I don't want to use a library.
So far I have some jQuery that I thought would work:
$(window).scroll(function() {
if (((($('.show_postQuestion').offset().top +
$('.show_postQuestion').height()) -
($(window).scrollTop()+$(window).height())) > 0)) {
// Post form off-screen
$('.show_postQuestion').addClass('fixed');
} else {
$('.show_postQuestion').removeClass('fixed');
}
});
The .fixed class is just position:fixed; bottom:0;
.
The problem with this is that, if the form scrolls off and fixes itself, it is no longer out of view and on the text scroll will un-fix itself, leading it to fix itself again, blah blah blah and making it flicker.
I was wondering if anyone has a suggestion as to how to fix this or an alternative solution?
Thanks!