使用CSS将元素滚动条强制到顶部

Question

我的网站上有一个容器，它是屏幕宽度的100％，并且使用overflow: auto拥有自己的滚动条。我的网站上没有显示标准滚动条，而是使用它，因为我网站主图层后面还有另一层也有自己的滚动条（你可以view my site here点击博文，看看我的意思）。

我有一个蓝色条，我想要固定在屏幕顶部。使用position: fixed以这种方式定位这很容易，但是条的宽度需要是屏幕宽度的100％，我发现条形图将与应用于其父级的滚动条重叠容器

这是一个显示我的意思的jsFiddle：http://jsfiddle.net/xUTR2/1/

我已经考虑过根据滚动条的宽度向左偏移条形图，但后来我决定不能依赖于估算不同浏览器的滚动条宽度，这会留下空隙如果没有滚动条。

是否有一种明显的方法可以强制滚动条渲染ont​​op？

Answer 1

你可以在某些事件中轻松地通过jquery来做到这一点。

 $("body").load(function () {
    $('scrollable container').css('overflow-y', 'auto');
 });

尝试将蓝条和其他页面内容保存在不同的容器中，我认为它可以为您解决问题。

Answer 2

由于我无法发表评论，我不得不给出答案 如果我是正确的，您希望将顶部的蓝色条形图放在固定的位置，如可见，同时向下滚动。

我亲自制作单独的容器

之类的东西

<div id='page'>
    <div id='bluebar'></div>
    <div id='content'></div>
</div>

可以找到演示here（http://limpid.nl/lab/css/fixed/header）

Answer 3

这是不可能以干净/健壮的方式实现的，因为您定位为固定的任何内容都是在主浏览器的上下文中（以及它所拥有的任何滚动条内）完成的，但是因为您删除了主体滚动条（并且你必须因为你不能在它上面的z-index位置）它不认为有任何东西，但你有它下面的这个div所以你唯一的选择是使用两个元素的固定边距和高度或使用some javascript method确定顶部div的正确宽度。