Javascript 当内容将其向下推时，保持div可见

我想在另一个div的底部放置一个div。我可以用它来解决这个问题

bottom: 0px;
postion: fixed;

但是，如果包含的div大于窗口，我想将内部div冻结到窗口的底部

---

如果第一个条件更简单，可以取消，内部div可以放在内容下，重要的是内容必须始终可见。

最好的解决方案是使用JavaScript检测页脚在视口中是否可见。如果没有，您应该将其样式更改为粘贴到窗口底部，而不是包含div的底部

您可以使用此功能查看它是否在视口中：

function elementInViewport(el) {
  var top = el.offsetTop;
  var left = el.offsetLeft;
  var width = el.offsetWidth;
  var height = el.offsetHeight;

  while(el.offsetParent) {
    el = el.offsetParent;
    top += el.offsetTop;
    left += el.offsetLeft;
  }

  return (
    top >= window.pageYOffset &&
    left >= window.pageXOffset &&
    (top + height) <= (window.pageYOffset + window.innerHeight) &&
    (left + width) <= (window.pageXOffset + window.innerWidth)
  );
}

工作示例： 试试这个：

HTML：

<div id="wrapper">
    <div id="innerContent"></div>
</div>

.fixedContent {
    position: fixed;
    bottom: 0;
}

var wrapper = document.getElementById('wrapper');
var content = document.getElementById('innerContent');
function position() {
    if (wrapper.offsetHeight + wrapper.offsetTop - content.offsetHeight - window.scrollY > window.innerHeight) {
        content.className += ' fixedContent';
    } else {
        content.className = content.className.replace('fixedContent', '');
    }
}

window.onload = position;
window.onresize = position;

以及javascript：

<div id="wrapper">
    <div id="innerContent"></div>
</div>

.fixedContent {
    position: fixed;
    bottom: 0;
}

var wrapper = document.getElementById('wrapper');
var content = document.getElementById('innerContent');
function position() {
    if (wrapper.offsetHeight + wrapper.offsetTop - content.offsetHeight - window.scrollY > window.innerHeight) {
        content.className += ' fixedContent';
    } else {
        content.className = content.className.replace('fixedContent', '');
    }
}

window.onload = position;
window.onresize = position;

如果您对jQuery持开放态度，则可以使javascript更简单、更兼容

var $wrapper = $('#wrapper');
var $content = $('#innerContent');
$(window).on('load resize', function() {
    $content.toggleClass('fixedContent', $wrapper.outerHeight(true)  $content.offset().top - $content.outerHeight(true) - $(document).scrollTop() > $(window).height());
});

编辑：

---

我修改了一些条件，添加了垂直滚动值和顶部偏移量。

如果包装器在窗口顶部下方开始200px（例如，因为有一个标题），会发生什么情况？然后它可以比窗户小，但仍然不完全可见。是的，那应该可以覆盖它。美好的