将div元素固定在页脚上

Question

我正在尝试制作一个div，使其在窗口滚动时黏在页脚上。我的代码几乎正确，但无法找出缺少了什么。

function checkOffset() {
  var eTop = $('#footer').offset().top;
  var chatTop = $('#chatArea').offset().top + $('#chat').innerHeight();
  var zero = ($(window).innerHeight() + $(window).scrollTop());
  var posFooter = eTop - zero;
  var posChat = chatTop - zero;
  if (posChat >= posFooter - 2) {
    $('#chatArea').css('bottom', -posFooter);
  } else {
    $('#chatArea').css('bottom', 0);
  }
  console.log(posFooter);
}
$(document).scroll(function() {
  checkOffset();
});

#wrapper {
  height: 540px;
  background-color: #ffffff;
}
#chatArea {
  width: 100%;
  position: fixed;
  bottom: 0;
  padding: 10px;
  border: 1px solid red;
}
#footer {
  background-color: #000000;
  color: #ffffff;
  padding: 20px;
  border-top: 2px solid #007cdc;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
  ...
  <div id="chatArea"></div>
</div>
<div id="footer"></div>

这是我为这个案例做的示例（wrapper的高度仅用于此示例）。 https://jsfiddle.net/v92qk4tn/ 提前感谢。

- eskimopest

---

为什么你不在页脚上使用 position:fixed; bottom: 0;？ - Christoph

那样做会让页脚始终显示在窗口中吗？页面将有滚动条，不希望页脚始终停留在窗口底部。 - eskimopest

Answer 1

我猜你可能错过了一个id名称#chatAreahttps://jsfiddle.net/v92qk4tn/2/

- Abhishek Pandey

---

谢谢你 =）这几乎完美了，但是当我向上滚动div时，它应该保持粘在页脚上，直到页脚消失，有一个瞬间你会看到它到达屏幕底部。如果你能帮我解决这个问题，我会非常感激 =）无论如何，再次感谢。 - eskimopest

@eskimopest，您将此标记为正确答案，但是您的评论让人感觉这仍然不正确。到底是哪个？ - henry

@henry，其中一个问题已由Abhishek Pandey纠正。这就是为什么我标记它为正确的原因。如果我不应该标记它，我很抱歉。我应该删除它吗？我仍在“发现”SO如何工作...无论如何，我来到这里发布我解决了问题。=）我应该使用正确的代码更新我的问题吗？ - eskimopest

哦，我不是说你做错了什么 :) 我只是不确定发生了什么。如果你自己解决了代码问题，你可以做的一件事是编写一个答案（在本页底部），然后将其标记为“已接受”（SO会告诉你先取消选中此选项）。这样，如果其他人遇到相同的问题并找到这个问题，他们可以直接遵循带有绿色勾号的答案。但无论如何都没有任何伤害。 - henry

谢谢，我之前已经说过我还是个“新手”，还在适应中。我会努力去做的。 - eskimopest

Answer 2

我刚刚发现如何让这个工作。

JS函数：

function checkOffset() {
    var eTop = $('#footer').offset().top;
    var zero = ($(window).innerHeight()+$(window).scrollTop());
    var posFooter = eTop - zero;

    if(posFooter <= 0) {
        $('#chatArea').css('bottom', -posFooter);
    }
    else {
        $('#chatArea').css('bottom', 0);
    }
}

感谢大家！

- eskimopest