滚动页面时隐藏透明固定位置div后面的可滚动内容？答案

【问题标题】：Hide scrollable content behind transparent fixed position divs when scrolling the page?滚动页面时隐藏透明固定位置div后面的可滚动内容？
【发布时间】：2011-09-25 15:27:35
【问题描述】：

我有一个名为 header 的 div，它设置了固定位置。问题是当我滚动页面时，页面内容显示在标题后面（标题是透明的）。

我对 css 了解很多，但似乎无法弄清楚这一点。我曾尝试将溢出设置为隐藏，但我知道它不起作用（而且它没有）。

这很难解释，所以我尽我所能。

html:

<div id="header">
    <div id="topmenu">Home | Find Feeds | Subscriptions</div>
</div>
<div id="container">
    <div id="content">
        testing
    </div>
</div>

css:

#header {
    margin:0 auto;
    position: fixed;
    width:100%;
    z-index:1000;
}
#topmenu {
    background-color:#0000FF;
    height:24px;
    filter: alpha(opacity=50);
    opacity: 0.5;
}

#leftlinks {
    padding: 4px;
    padding-left: 10px;
    float: left;
}

#rightlinks {
    padding: 4px;
    padding-right: 10px;
    float: right;
}

#containerfixedtop {
    width: 100%;
    height: 20px;
}

#contentfixedtop {
    margin: 0 auto;
    background-color: #DAA520;
    width: 960px;
    height:20px;
}

#container {
    position: relative;
    top: 68px;
    width: 100%;
    height: 2000px;
    overflow: auto;
}

#content {
    margin: 0 auto;
    background-color: #DAA520;
    width: 960px;
    height: 2000px;
}

这是问题的截图：

【问题讨论】：

你能得到问题的截图吗？
可以添加css和html吗？
@mtlca401：您找到最终解决方案了吗？我有类似的问题
您是否尝试过在透明背景上禁用用户事件。
请看我这篇文章中的解决方案：The Solution

标签： css position fixed

【解决方案1】：

只是来晚了，但万一其他人将来遇到这种情况，这是你的解决方案。

您的 CSS 代码：

.wrapper {
    width:100%;
    position:fixed;
    z-index:10;
    background:inherit;
}

.bottom-wrapper {
    width:100%;
    padding-top:92px;
    z-index:5;
    overflow:auto;
}

您的 HTML：

<div class="wrapper">
    ...your header here...
</div>
<div class="bottom-wrapper">
    ...your main content here...
</div>

这将为您提供一个与您的网站完全匹配的标题，并浮动在顶部。主要内容将滚动到标题之外，并在通过标题时消失。您的 .bottom-wrapper padding-top 应该是标题包装器内容的高度。

干杯！

【讨论】：

这并没有解决他关于为透明包装器/div隐藏它的问题，
我遇到了类似的问题并尝试将其放入但我仍然得到相同的结果...顶部仍然是透明的
header应该是透明的，和父背景不一样

【解决方案2】：

您可能正在寻找z-index。它允许您指定页面上元素的垂直顺序，因此带有z-index: 10 的元素（视觉上）浮动在带有z-index: 5 的元素上方。

给内容z-index: 5看看是否有效。

【讨论】：

只有当我为标题 div 设置背景（无论是彩色还是纯色图像）时，这才是正确的。我的标题 div 是透明的。我的标题 div 的 z-index 设置为 1000。当我滚动页面时，可滚动内容仍然显示在标题后面。
使内容的z-index高于表头。您可以发布您的问题的屏幕截图吗？我没看清楚。
如何上传图片？我没有看到这个选项。
热链接。您还没有足够的声望来发布图片。
我不确定是否可以上传到stackoverflow，所以我暂时将它上传到我的服务器。 craiggodfrey.com/screenshotproblem.jpg

【解决方案3】：

我遇到了类似的问题，并为我的情况找到了解决方案。无论您使用的是全屏背景图片还是纯色（包括白色），它都应该适用。

HTML

<div id="full-size-background"></div>
 <div id="header">
  <p>Some text that should be fixed to the top</p>
</div>
<div id="body-text">
  <p>Some text that should be scrollable</p>
</div>

CSS

#full-size-background {
z-index:-1;
background-image:url(image.jpg);
background-position:fixed;
position:fixed;
top:0px;
left:0px;
width:100%;
height:100%;
}
#header {
position:fixed;
background-image:url(image.jpg);
height:150px;
width:100%;
}
#body-text {
margin-top:150px;
}

这给了我一个带有透明固定标题的整页图像的外观，当正文内容滚动时，它隐藏在标题后面。图像看起来无缝。

你可以用纯色背景做同样的事情，但可以说，它会更容易。

2 注意：header 有固定高度，我只在 FF 和 Chrome 中测试过。

【讨论】：

【解决方案4】：

#header 有固定高度吗？

#header {position: fixed; height: 100px; }
#container {position: absolute; top: 100px; bottom: 0; overflow: auto; }

很确定这在 IE 中不起作用...

【讨论】：

它没有设定高度，但我尝试了设定高度，但还是一样（可能不是你问的原因）。 IE 我不在乎它是否有效。我不支持它（可能是 IE 9 和 10）。
@jsbin.com/omulis - 我正在寻找的效果是滚动的内容不会显示在标题后面。现在它（橙色部分）显示在标题后面。图像的紫色部分是橙色与蓝色混合的结果。标题是透明的蓝色。橙色部分是内容。
这很奇怪。在我的 Firefox/Safari/Chrome 上，滚动时 #container 没有显示在 #header 后面。
这很有趣。你为身体设置了背景吗？这是我从 CSS 中遗漏的一件事。另外，您使用的标题（基于我的 html）是否透明？
jsbin.com/ibovoq -- 我已经在你的标记中实现了这个方法（大量编辑）。仅在#top-menu（#0000FF，半透明）和#content (#DAA520) 上使用背景颜色。

【解决方案5】：

刚刚为这类问题提出了一个我非常满意的新解决方案。

在需要隐藏在透明元素后面的内容上使用clip-path。然后在窗口滚动时用js动态更新clip-path。

HTML

<div id="sticky">Sticky content</div>
<div id="content">
  <!-- any html inside here will hide behind #sticky -->
</div>

JS

window.addEventListener("scroll",function(){
  const windowScrollTop = window.scrollTop;
  const elementToHide = document.getElementById("content");

  elementToHide.style.clipPath = `inset(${windowScrollTop}px 0 0 0)`;
});

动态粘性内容

在我的例子中，我有一个元素在滚动过去后切换到 position: sticky。 #sticky 内容需要相对于它之前的 dom 元素，直到我们滚动得足够远。我是这样解释的：

HTML

<div id="otherStuff">Here's some other stuff</div>
<div id="sticky">Sticky content</div>
<div id="content">
  <!-- any html inside here will hide behind #sticky -->
</div>

JS

window.addEventListener("scroll",function(){
  const windowScrollTop = window.scrollTop;
  const stickyElement = document.getElementById("sticky");
  const elementToHide = document.getElementById("content");
  const stickyElementTop = stickyElement.getBoundingClientRect().top

  if(windowScrollTop >= stickyElementTop){
    stickyElement.style.position = "sticky";
    elementToHide.style.clipPath = `inset(${windowScrollTop - stickyElementTop}px 0 0 0)`;
  }
  else {
    stickyElement.style.position = "relative";
    elementToHide.style.clipPath = "none";
  }
});

【讨论】：

【解决方案6】：

我使用带有颜色的背景属性解决了这个问题，即使你愿意也可以使用 var

.header{
    width:100%;
    position:fixed;
    z-index:10;
    background:blue;
    /* background: var(--my-var-value);  You can do this if needed*/
}

【讨论】：

【解决方案7】：

修复内容div在header下方的位置+overflow-y内容div。

【讨论】：

【解决方案8】：

我已经修复了背景图片
标题背景是透明的
我不希望我的内容覆盖我的透明标题

我想出了一个滚动 div 而不是 body 的解决方案：

<div>
    <div class="header"></div>
    <div class="content"></div>
</div>


.header { position: fixed; ... }
.content { position: fixed; height: calc(100% - HEADER_HEIGHT); overflow: scroll; }

【讨论】：

使用这种技术，Firefox (65, 66) 会显示滚动条（甚至是不必要的 X 滚动条），但它们无法滚动。

【解决方案9】：

我也遇到过类似的问题，但使用一个简单的脏黑客解决了它

1) 在 images 文件夹中有一张白色图片

2) 然后在标题样式中添加这个 css

z-index:999; // 在滚动内容上方制作标题

背景图片: url("../images/white.png"); // 隐藏滚动内容

3) 完成了！！

【讨论】：

与简单的背景同样有效：background-color: #fff;

【解决方案10】：

标头的 z-index 设置为 1000，因此如果您希望容器堆叠在标头之上，则容器的 z-index 必须为 1001。 https://codepen.io/richiegarcia/pen/OJypzrL

#header {
    margin:0 auto;
    position: fixed;
    width:100%;
    z-index:1000;
}
#topmenu {
    background-color:#0000FF;
    height:24px;
    filter: alpha(opacity=50);
    opacity: 0.5;
}

#leftlinks {
    padding: 4px;
    padding-left: 10px;
    float: left;
}

#rightlinks {
    padding: 4px;
    padding-right: 10px;
    float: right;
}

#containerfixedtop {
    width: 100%;
    height: 20px;
}

#contentfixedtop {
    margin: 0 auto;
    background-color: #DAA520;
    width: 960px;
    height:20px;
}

#container {
    position: relative;
    top: 68px;
    width: 100%;
    height: 2000px;
    overflow: auto;
    z-index:1001;
}

#content {
    margin: 0 auto;
    background-color: #DAA520;
    width: 960px;
    height: 2000px;
}

【讨论】：

【解决方案11】：

我遇到了同样的问题。我只是在 CSS 中将 z-index:10 添加到 .header 中。

【讨论】：

【解决方案12】：

我通过添加另一个固定 div 解决了这个问题

HTML：

<div id="header">
    <div id="topmenu">Home | Find Feeds | Subscriptions</div>
</div>
<div id="fixed-container">
    Content...
</div>

CSS：

#fixed-container{
margin-top: header_height;
height: calc(100% - header_height);
width: 100%;
position: fixed;
overflow: auto;
}

【讨论】：