console 命令行工具 X clear

console

function getStyle(dom, attr) {
  return dom.currentStyle ? dom.currentStyle[attr] : getComputedStyle(dom, false)[attr];
}
let items = document.querySelectorAll('.item');
let d = document.documentElement || document.body;
let footer = document.querySelector('.footer');
if(items.length) {
  let finalItem = items[items.length - 1];
	
  // 判断最后一个高度 是否大于 可视区高度
  if(finalItem.offsetTop + parseInt(getStyle(finalItem, 'height')) > d.clientHeight) {
    console.log('大于');
    footer.classList.add('fixBottom');
  }
}

document.addEventListener('scroll', function (e) {
  let d = document.documentElement || document.body;
  let finalItem = items[items.length - 1];
  if(d.scrollTop + d.clientHeight - 50 > finalItem.offsetTop + parseInt(getStyle(finalItem, 'height'))) {
     footer.classList.remove('fixBottom');
  } else {
    footer.classList.add('fixBottom');
  }
})

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Document</title>
</head>
<body>
  <div class="box">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <footer class="footer"></footer>
  </div>
  <h1>hahahhaha</h1>
  <h1>hahahhaha</h1>
  <h1>hahahhaha</h1>
  <h1>hahahhaha</h1>
</body>
</html>

.box {
  
}
.item {
  height: 200px;
  border: 1px solid #ccc;
  margin: 15px 0;
}
.box .footer {
  height: 50px;
  width: 100%;
  background-color: #f00;
}
.fixBottom {
  position: fixed;
  bottom: 0;
}