Question

我有一个名为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;
}

以下是问题的屏幕截图：

enter image description here

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应该是你的标题包装内容的高度。

干杯！

Answer 2

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

提供内容z-index: 5并查看其是否有效。

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

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

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

2注意：标题有一个设定的高度，我只在FF和Chrome中测试过。

Answer 4

#header是否有设定的高度？

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

非常确定这在IE中不起作用......

Answer 5

将内容div的位置固定在标题+溢出-y内容div下面。

Answer 6

我认为现在回答很晚。但是后来有人看看这会有所帮助。

只需在标题类

中添加背景

以下是代码 - ＆gt;

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

os.rename

Answer 7

我也遇到过类似的问题，但是使用一个简单的肮脏的技巧解决了

1）在图像文件夹中有白色图像

2）然后以标题样式添加此CSS

z-index：999; //将标题置于滚动内容上方

background-image：url（“ ../ images / white.png”）; //隐藏滚动内容

3）完成了！

Answer 8

标头的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;
}

Answer 9

对于这种类型的问题，我想出了一个新的解决方案，对此我很满意。

在需要隐藏在透明元素后面的内容上使用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";
  }
});

Answer 10

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

struct ContentView: View {    

    var body: some View {
        WebViewWrapper(html: "<h1>Hello World!</h1>")
    }
}

struct WebViewWrapper: NSViewRepresentable {
    
    let html: String
    
    func makeNSView(context: Context) -> WKWebView {
        return WKWebView()
    }
    
    func updateNSView(_ nsView: WKWebView, context: Context) {
        nsView.loadHTMLString(html, baseURL: nil)
    }
}

Answer 11

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

Answer 12

我通过添加另一个固定的 div 解决了这个问题，该 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;
}

Answer 13

我有固定的背景图片
标题背景是透明的
我不希望我的内容覆盖我的透明标题

我提出了一个滚动div而不是正文的解决方案：

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


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

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

13 个答案:

动态粘性内容