当滚动页面时，如何将可滚动内容隐藏在透明的固定位置div后面？

Question

我有一个固定位置的div，叫做header。问题是当我滚动页面时，页面内容出现在header后面（header是透明的）。

我对CSS很了解，但似乎无法解决这个问题。我尝试将overflow设置为hidden，但我知道这不会起作用（而且确实没有起作用）。

这很难解释，所以我尽力了。

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;
}

这是问题的截图：

- mtlca401

---

你能截一下问题的屏幕截图吗？ - Nightfirecat

请问您可以添加 CSS 和 HTML 吗？ - yoel

@mtlca401：你找到最终解决方案了吗？我有类似的问题。 - jsduniya

你尝试过在透明背景上禁用用户事件吗？ - Nitin

请查看我在这篇文章中的解决方案：The Solution - JCBrown

Answer 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 应为页头包装器内容的高度。

干杯!

- Martin

---

这并未回答他关于如何在透明的包裹器/ DIV 中隐藏它的问题。 - Taylor C. White

我遇到了类似的问题，尝试了这个方法，但仍然得到了相同的结果...顶部仍然是透明的。 - lightweight

头部应该是透明的，而不是与父元素相同的背景。 - froggomad

Answer 2

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

给内容赋值z-index: 5，看看它是否有效。

- Blender

---

只有当我为标题div设置背景（无论是颜色还是实心图像）时，才会出现这种情况。我的标题div是透明的。我的标题div的z-index设置为1000。当我滚动页面时，可滚动内容仍然显示在标题后面。 - mtlca401

将内容的 z-index 设为高于头部。你能否发布一张问题的截图？我还没有完全看清楚。 - Blender

我该如何上传图片？我没有看到相应的选项。 - mtlca401

热链接到它。您的声望还不足以发布图像。 - Blender

我不确定是否可以上传到stackoverflow，所以暂时只是将其上传到我的服务器上。http://craiggodfrey.com/screenshotproblem.jpg - mtlca401

这真的很有效，你必须将标题的 z-index 设置得比内容高。 - qed

Answer 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;
}

这使得我的页面看起来像是一个透明的固定标题和全页图像，当正文内容滚动时，它会隐藏在标题后面。图片看起来无缝连接。

你也可以使用纯色背景做同样的事情，不过这样做可能更容易。

两个注意点：标题有一个固定高度，我只在FF和Chrome中测试过。

- Scott Sawyer

Answer 4

我刚想到了一个新的解决方案，对于这种问题我感到非常满意。

在需要被透明元素遮盖的内容上使用clip-path。然后通过JavaScript在窗口滚动时动态更新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";
  }
});

- Jake Zeitz

Answer 5

我使用带有颜色的background属性来解决这个问题，即使你想使用var也可以。

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

- Roberto Molina

Answer 6

#header有设置高度吗？

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

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

- asymptote

---

它没有设置高度，但我尝试了一个设置高度，但依然是同样的情况（虽然这可能不是你问的原因）。IE 我不在乎它是否有效。我不支持它（也许只有 IE 9 和 10）。 - mtlca401

@jsbin.com/omulis - 我想要的效果是滚动内容不会显示在标题栏后面。现在它（橙色部分）出现在标题栏后面。图像的紫色部分是橙色与蓝色混合的结果。标题栏是透明的蓝色。橙色部分是内容。 - mtlca401

很奇怪，在我的Firefox/Safari/Chrome浏览器中，当滚动页面时，#container没有显示在#header后面。 - asymptote

很有趣。你为body设置了背景吗？这是我在css中遗漏的一件事。另外，你使用的标题（基于我的html）是透明的吗？ - mtlca401

我是个白痴qwer0o。你把jsbin.com/omulis作为链接发布，但由于某种原因我以为那是你的用户名。是的，这正是我想要的效果，只要在标题透明时内容不显示即可。 - mtlca401

Answer 7

1. 我有一个固定的背景图片
2. 标题栏背景是透明的
3. 我不想让我的内容覆盖我的透明标题栏

我想到了一个解决方案，即滚动 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; }

- Paulo Cheque

---

通过这种技术，Firefox（65、66）会显示滚动条（甚至是不必要的X滚动条），但它们无法用于滚动。 - Victoria

Answer 8

我遇到了同样的问题，所以tize提供的答案对我帮助很大。我在头部下面创建了一个div，并使用了一些CSS（z-index、overflow和background），这样主要元素就可以滚动并隐藏在透明的头部后面： HTML：

<header>
<h1>Hello World</h1>
</header>
<div class="inv-header"></div>
<main>Content Here...</main>

CSS：

header{
position:fixed;
background:rgba(255,255,255,80%);
top:0;
width:100%;
z-index:10;
}

.inv-header{
position:fixed;
top:0;
height:12.8%;
width:100%;
background:inherit;
}

main{
margin-top:5.9%;
padding-top:1%;
overflow:auto;
}

- Lucasdt

Answer 9

我通过添加另一个固定的 div，将其定位在我的页眉正下方，并设置与页眉相同大小的 margin-top 来解决了这个问题。 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;
}

- tize

Answer 10

我也遇到了类似的问题，但是通过一个简单的“脏”方法解决了它

1）在图像文件夹中放置一张白色图像

2）然后在头部样式中添加以下CSS

z-index:999; // 使头部位于滚动内容之上

background-image : url("../images/white.png"); // 隐藏滚动内容

3）完成！

- naveen

---

仅使用简单的背景也能正常工作：background-color: #fff; - oaklandrichie