0

我的网站上有一个 100% 的屏幕宽度的容器，并且有自己的滚动条，使用overflow: auto. 标准滚动条不会显示在我的网站上，我使用它是因为在我的网站主层后面还有另一层也有自己的滚动条（您可以在此处查看我的网站并单击博客文章以了解我的意思） .

我有一个蓝条，我想将它固定在屏幕顶部。就以这种方式定位而言，这很容易，position: fixed但是栏的宽度需要是屏幕宽度的 100%，我发现该栏将与应用于其父容器的滚动条重叠。

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

我曾考虑根据滚动条的宽度将条向左偏移，但后来我决定我不能依赖估计不同浏览器的滚动条的宽度，如果有的话，那会留下一个差距没有滚动条。

有没有一种明显的方法可以强制滚动条在顶部呈现？

4

3 回答 3

0

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

于 2012-10-04T07:53:11.317 回答
0

在某些情况下，您可以通过 jquery 轻松完成此操作。

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

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

于 2012-10-04T07:10:12.157 回答
0

由于我还不能发表评论，我被迫给出答案。
如果我正确，您希望在向下滚动时将顶部蓝色条置于固定位置，如可见。

我个人会制作单独的容器
，例如

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

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

于 2012-10-04T07:10:43.747 回答