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

将div粘贴到窗口底部

1 个答案: