Question

我创建了一个页面，我试图获得底部对齐工具栏的效果，就像一本脸书一样。为此我创建了一个具有最高z-index的div，将位置设置为fixed并将底部设置为0，如

#bar
{
 z-index  : 11;
 position : fixed;
 bottom   : 0;
 height   : 50;
 left     : 0;
 right    : 0;
}

它工作正常但滚动时似乎页面需要时间渲染，就像页面很重，滚动很平滑，但页面渲染只是有点慢，产生不太好的滚动效果。有没有人知道什么事情......

或者你甚至得到了我：p

Answer 1

位置：固定本身不应该导致这些问题。

听起来浏览器在渲染页面时速度很慢。页面大还是复杂？这可能是由于过于复杂的HTML，CSS，特别是Javascript引起的。

尝试依次简化（或禁用JS）每个。

（我会仔细研究任何JS事件或使用*选择器的CSS。）

Answer 2

如果底部栏位于HTML代码的底部，则会在其他所有内容之后加载（并呈现）。如果页面的其余部分很大（愚蠢的代码，复杂的javascripts或巨型图像），这可能会使一切变得更糟，因为在页面加载时，样式会或多或少地连续应用。

检查此方法的简单方法：在超级简单页面重新创建底栏，看看是否获得相同的效果。如果是这样，您的页面可能很大或很复杂。

或者你的电脑很慢： - ）

Answer 3

如果您有“背景附件：已修复”规则，也可能导致类似问题。另一个需要注意的问题是IE6不支持position：fixed，所以你必须使用JavaScript - 这也会减慢网站的速度。