我希望有人能在这里帮助我。
我试图修复页面底部的 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});
关于javascript - 固定位置直到滚动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6819461/