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

Question

我想让一个 div 位于另一个 div 的底部。这个我可以解决

bottom: 0px;
postion: fixed;

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

如果更容易取消第一个条件并且内部 div 可以定位在内容下方，重要的部分是内容必须始终可见。

Answer 1

最好的解决方案是使用 JavaScript 检测页脚是否在视口(viewport)内可见。如果不是，您应该更改它的样式以固定在窗口底部而不是包含 div 的底部。

您可以使用此函数查看它是否在视口(viewport)中:

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)
  );
}

(取自How to tell if a DOM element is visible in the current viewport?)

现在，每次滚动页面或调整页面大小时，您都可以进行检查以运行该功能。基于此，您可以决定设置一个类或更改一个 CSS 属性来满足您的需求。

由于您没有包含任何代码(以后请包含)我假设您的代码如下所示:

<div class="wrapper">
    (contents)

    <div class="footer">footer</div>
</div>

要将 .footer 粘贴到 .wrapper 的底部，它必须有一个 'positon: absolute' 并且包装器需要一个 position:relative。但是，如果您将其 position 属性更改为 fixed 并将包装器更改为 static (所有元素的默认值)，则页脚将保持不变而不是到窗口的底部。

查看此示例 http://jsfiddle.net/GMYEh/

现在，使用上面的脚本，您可以判断它应该是两者中的哪一个。您必须在页脚的相同位置使用假元素，而不是页脚本身。这样，如果将页脚移动到窗口的底部，您仍然可以测量包装器的底部是否在视口(viewport)中。 (如果您测量页脚本身并移动它，您会卡住)。

执行此操作的脚本(在 jQuery 中):

// add a fake footer after the wrapper
$('.wrapper').after($('<div class="fakefooter" />'));

$(document).on('resize scroll', function(e){
    //measure if the fake footer is in viewport
    if(elementInViewport($('.fakefooter')[0])) {
        // If so, it should be in the bottom of the wrapper. 
        $('.wrapper').css('position', 'relative');
        $('.footer').css('position', 'absolute');
    } else {
        // else it should be in the bottom of the window
        $('.wrapper').css('position', 'static');
        $('.footer').css('position', 'fixed');
    } 
});

工作示例: http://jsfiddle.net/GMYEh/4/