粘滞DIV停留在滚动的底部，但不与页脚重叠

<div class="sticky-div">我是粘滞DIV</div>
<footer>页脚</footer>

.sticky-div {
  position: fixed;
  bottom: 0;
  width: 100%;
  background-color: #f1f1f1;
  padding: 10px;
}

footer {
  height: 100px;
  background-color: #ccc;
}

window.addEventListener('scroll', function() {
  var stickyDiv = document.querySelector('.sticky-div');
  var footer = document.querySelector('footer');
  var stickyDivHeight = stickyDiv.offsetHeight;
  var footerOffset = footer.offsetTop;

  if (window.pageYOffset + window.innerHeight >= footerOffset) {
    stickyDiv.style.bottom = (window.pageYOffset + window.innerHeight - footerOffset) + 'px';
  } else {
    stickyDiv.style.bottom = '0';
  }
});