滚动体*下面*透明头部div？ [英] Scrolling body *underneath* a transparent header div?

问题描述

我想实现一个带有固定标题和固定边栏的滚动体。我想我几乎在那里，除了身体在标题顶部滚动。我希望我可以简单地增加标题相对于正文的z-index，但这不工作，因为标题大部分是透明的。

I am trying to achieve a scrolling body with fixed header and fixed sidebar. I think I am almost there except that the body scrolls on top of the header. I wish I could simply increase the z-index of the header in relation to the body but this doesn't work since the header is mostly transparent.

这里是网站：链接

任何想法？
感谢

Any ideas? Thanks

编辑：我应该澄清，我想要的内容是不可见的，因为它滚动在标题下，而不只是作为它下面的一层。 p>

I should clarify that I want the content to be invisible as it scrolls underneath the header, not simply as a layer beneath it.

推荐答案

使用相同的背景图片为您的正文和标题，但 background-position：fixed 。
这样，标题将具有不透明度，内容可以在下面滚动并隐藏。使用固定位置可确保两张图片无缝显示。

Use the same background image for your body and header, but with background-position:fixed. This way, the header will have opacity for the content to scroll beneath and be hidden. Using fixed position will ensure that the two images appear seamless.

在侧边注释中，我无法查看您网站上的整个侧边栏，您可能需要重新考虑使用这样的刚性布局。

On a side note, I am unable to view the entire sidebar on your site, you may want to reconsider using such a rigid layout.

这篇关于滚动体*下面*透明头部div？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！