Affix div внизу окна

Question

Мне было интересно, как я могу исправить div в нижней части окна, когда он прокручивается из поля зрения. Я знаю, что вы можете сделать это с помощью twitter bootstrap, но я не хочу использовать библиотеку.

До сих пор у меня есть некоторые JQuery, что я думал, что будет работать:

$(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'); 
    } 
}); 

.fixed класс просто position:fixed; bottom:0;.

Проблема заключается в том, что если форма прокручивается и фиксируется сама по себе, она больше не выходит из поля зрения, а на прокрутке текста она будет исправлена ​​сама по себе, что приведет ее снова к исправлению, бла-бла-бла и он мерцает.

Мне было интересно, есть ли у кого-нибудь предложения относительно того, как исправить это или альтернативное решение?

Спасибо!

Answer 1

Если я правильно понял ваш вопрос, вы хотите, чтобы элемент был прикреплен к нижней части окна, если он обычно находился ниже страницы и не отображался. И когда пользователь прокручивается до своего естественного положения, он будет протекать со свитком как обычно.

Я немного изменил вашу функцию, чтобы запомнить начальное положение элементов при загрузке страницы и использовать это, чтобы каждый раз сравнивать его с точкой scrollTop.

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 
});