固定位置，直到滚动

Question

我希望有人可以在这里帮助我。

我试图在页面底部修复一个div，直到用户滚动它，然后它也会向上滚动。

Answer 1

对于您是希望div定位在整个文档的底部还是最初定位在窗口的底部然后滚动，您的问题中存在一些歧义。

在文档底部

定位在文档底部（无论文档有多长）都很容易。 只需在div上设置以下CSS：

#yourDiv {
    position: absolute;
    bottom: 0;
}

这会将其放置在文档的末尾。 如果文档短于窗口高度，它将不在窗口底部，而是在文档末尾。 如果文档比窗口高度高，则它在文档底部的位置最初将在窗口底部下方，并且仅当文档向上滚动时才可见。

在“窗口底部”，然后滚动到该位置

如果您希望它最初显示在窗口的底部，然后在页面滚动时在页面上的该位置滚动，则无法使用纯CSS做到这一点，但是需要使用javascript对其进行定位。

用伪代码：

wHeight = get height of window
oHeight = get height of your object that you want to place at the bottom
Then, set the position on your object using absolute position:
    o.style.position = "absolute";
    o.style.top = (wHeight - oHeight) + "px";

即使您滚动，该对象也将从文档顶部开始保持固定像素数。

这是一个使用jQuery的工作示例： http : //jsfiddle.net/jfriend00/ZV2bM/

HTML：

<div id="footer">This is my footer</div>

CSS：

body {
    background-color: #777; 
    height: 4000px;
    padding: 0;
}
#footer {
    position: absolute; 
    text-align: center; 
    background-color: #444;
    width: 100%;
    color: #FFF;
}

JS：

var pos = $(window).height() - $("#footer").height();
$("#footer").css({top: pos});

Answer 2

<div style="position:fixed; bottom:0px; right:10px;">

或正确属性的任何内容。

Answer 3

该站点只是将div放置在底部并使其正常滚动。 如果需要，您可以使用：

<div style="position: absolute; bottom: 0px; left: 0px;"></div>

这样做的另一个优点是，它可以在所有浏览器中使用，而在position: fixed浏览器中则可以使用position: fixed在某些旧版浏览器（例如Internet Explorer 6）中不起作用。