javascript - 将元素与窗口底部对齐，但允许滚动到下方的内容

Question

我现在正在编写一个 jquery 滑块，我将宽度设置为 100%，无论窗口大小如何调整，我都希望它与窗口底部对齐。我已经找到了让它在你向下滚动的整个过程中一直保持在底部的方法，但我不想要这个。我希望能够在此滑块下方滚动以获取更多内容。

这个网站显示了我正在寻找的那种功能。我试图用萤火虫检查它以找出它是如何发生的部分，但我无法弄清楚。

http://pixelthemes.net/immersion/

谢谢您的帮助！

Answer 1

您可以简单地通过计算大小而不将画廊与底部对齐来实现这一点。

var resize = function () {
    var availHeight = window.innerHeight;
    // you need to either calculate
    // or set a fixed offset from the top for content above
    var offset = 80;

    document.getElementById("slider").style.height = availHeight - offset + "px";
}

window.addEventListener("resize", resize, false);
window.addEventListener("load", resize, false);

假设您的滑块具有 100% 的宽度，它应该完全符合您的要求。如果滑块上方的内容是 80 像素高，那么如果它一直向上滚动，它应该正好粘在窗口的底部。