页脚的动态绝对位置，缺少像素 - 无限滚动

Dynamic absolute position for footer, missing pixels - scrolling indefinitely

本文关键字：像素 滚动 无限 位置 动态      更新时间：2023-09-26

我需要有一个相对于其父级的页脚，我需要将其固定在窗口底部。

我进行了计算以获得正确的top值，但我缺少 8 个像素 - 这会导致滚动无限滚动。

我在计算中缺少什么？

$(function () {
  changeFooter();
});
$(window).resize(function () {
  changeFooter();
});
$(window).scroll(function () {
  changeFooter();
});
function changeFooter() {
  var footer = $("#footer");
  footer.css({ top: getFooterTop(footer) + 'px' });
}
function getFooterTop(footer) {
  return window.innerHeight + $(window).scrollTop() - footer.height();
}
function getFooterTopFixed(footer) {
  return window.innerHeight + $(window).scrollTop() - footer.height() - 8;
}
#wrap {
  position:absolute;
  left:0px;
  width: 100%;
  margin-bottom: 50px;
}
#footer {
  position: absolute;
  width: 100%;
  height: 50px;
  background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrap">
  <p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p>
  <div id="footer"></div>
</div>

https://jsfiddle.net/rs4f1jt0/2/

您可以在链接中看到-8像素固定定位，我只是无法弄清楚这8个像素来自哪里来修复计算。

谢谢。

为什么不尝试使用固定在页脚上的位置？喜欢这个：

#wrap {
 position:relative;
 left:0px;
 width: 100%;
 margin-bottom: 50px;
}
#footer {
 position: fixed;
 bottom:0;
 width: 100%;
 height: 50px;
 background-color: green;
}
相关文章：