Question

我需要有一个与其父母相关的页脚，我需要将其固定在窗口的底部。

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

我的计算中缺少什么？

＆＃13;

$(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;
}

＆＃13;

#wrap {
  position:absolute;
  left:0px;
  width: 100%;
  margin-bottom: 50px;
}

#footer {
  position: absolute;
  width: 100%;
  height: 50px;
  background-color: green;
}

＆＃13;

<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>

＆＃13;

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

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

感谢。

Answer 1

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

#wrap {
 position:relative;
 left:0px;
 width: 100%;
 margin-bottom: 50px;
}

#footer {
 position: fixed;
 bottom:0;
 width: 100%;
 height: 50px;
 background-color: green;
}

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

1 个答案: