固定位置，直到滚动

Fixed position until scrolled

本文关键字：滚动 定位 位置      更新时间：2023-09-26

我希望有人能帮我。

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

您的问题中存在一些歧义，即您是希望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});

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

或者任何合适的属性。

该站点只是将div定位在底部并使其正常滚动。如果你想要，你可以使用：

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

这样做的另一个优点是它适用于所有浏览器，而position: fixed不适用于一些较旧的浏览器，如InternetExplorer6。

相关文章：