固定位置直到滚动

时间:2011-07-25 16:39:57

标签: javascript jquery

我希望有人可以帮助我。

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

3 个答案:

答案 0 :(得分:3)

您的问题中存在一些含糊不清的问题,即您是否希望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});

答案 1 :(得分:0)

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

或其他任何正确的属性。

答案 2 :(得分:0)

该网站只是将div放在底部并使其正常滚动。如果你想要,你可以使用:

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

这样做的另一个好处是它可以在所有浏览器中使用,而position: fixed在某些旧浏览器(如Internet Explorer 6)中不起作用。