对齐元素窗口的底部，但允许滚动内容下面 [英] Align element to bottom of window but allow scrolling to content underneath

问题描述

我编程一个jQuery滑块，现在，我的宽度设置为100％，我希望它对准窗口的底部，无论窗口大小调整。我已经找到办法让它粘在底部的整个过程中，你向下滚动，但我不希望这样。我希望能够滚动低于这个滑块以获得更多的内容。

I'm programming a jquery slider right now and I have the width set to 100% and I want it to align to the bottom of the window no matter how the window is resized. I have found ways to make it stick to the bottom the whole time you scroll down, but I do not want this. I want to be able to scroll below this slider to get to more content.

该网站显示的那种作用，我期待的。我试图用萤火检查它找到一部分它是怎么发生的，但我不能弄明白。

This website shows the kind of function that I am looking for. I tried to inspect it with firebug to find the part how it was happening but I couldnt figure it out.

http://pixelthemes.net/immersion/

感谢您的帮助！

推荐答案

您可以简单地通过计算尺寸，而不是对准画廊底部实现这一点。

You could achieve this simply by calculating the size and not aligning the gallery to the bottom.

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％的宽度，这应该正是你想要的。如果内容滑块上方​​是80px唤起注意，应确切地粘在窗口的底部，如果它被滚动所有的方式。

Assuming that your slider has a 100% width, it should exactly do what you want. If your content above the slider is 80px heigh, it should exactly stick to the bottom of the window if it is scrolled all the way up.

这篇关于对齐元素窗口的底部，但允许滚动内容下面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！