Прикрепите div к нижней части окна

Мне было интересно, как я могу исправить 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;.

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

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

Спасибо!


javascript css position affix
person Raiden616    schedule 04.03.2013    source источник

Ответы (1)


arrow_upward
2
arrow_downward

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

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

Скрипка

$(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
});
person Seain Malkin    schedule 04.03.2013