Lock div at bottom of window

Question

I was wondering how I can fix the div at the bottom of the window when it scrolls out of view. I know you can do this with twitter bootstrap, but I don't want to use the library.

So far I have jQuery which 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; position:fixed; bottom:0; .

The problem is that if the form scrolls and fixes by itself, it no longer leaves the field of view, and in it the text scroll will be fixed by itself, which will lead to its correction again, blah blah blah and its creation flicker .

I was wondering if anyone has a suggestion on how to fix this or an alternative solution?

Thanks!

Answer 1

If I understand your question correctly, you want the element to be fixed at the bottom of the window, if it is usually below the page and does not appear. And when the user scrolls down to his natural position, he will proceed with the scroll as usual.

I changed your function a bit to remember the initial position of the elements when loading the page and use it to compare with each scrollTop point.

Fiddle

 $(function() { var $postQ = $(".show_postQuestion"), $postQPos = $postQ.offset().top + $postQ.height(), $win = $(window); $win.scroll(function() { if ($postQPos > $win.scrollTop() + $win.height()) { // Post form off-screen $('.show_postQuestion').addClass('fixed'); } else { $('.show_postQuestion').removeClass('fixed'); } }).trigger('scroll'); // trigger the event so it moves into position on page load });