将 div 附加到窗口底部答案

【问题标题】：Affix div to bottom of window将 div 附加到窗口底部
【发布时间】：2013-03-04 08:33:06
【问题描述】：

我想知道如何在 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

【解决方案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
});

【讨论】：