如何通过CSS，JS或jQuery隐藏透明标头后面的内容

Question

我制作了一个标题，由带有徽标和社交链接的顶部透明部分以及一个从顶部进行填充的纳维栏组成。这是我制作的透明标题。在Navbar上，我有一些锚点，并且运行良好（我根据引导程序中的要求添加了填充物，然后效果很好）。问题在于，当我滚动页面时，内容就会在标题后面。在这里查看现在正在发生的事情。这不是我想要的。我已经阅读了大量有关类似情况的帖子，但是我找不到解决方案。是否有JavaScript解决方法或tecnique可以掩盖内容div时？我该如何实现？我真的很想保存透明的顶部标头！非常感谢和问候！

Answer 1

我找到了没有JS或jQuery的最简单解决方案。

1）确保将标题包含在特定的DIV中，并为其设置一个类。示例：

<div class="content_header">...</div>

2）假设您已经为您的身体设置了背景图像（或为包含内容的Div），请在CSS中添加此图片：

.content_header {
position: fixed;
background: url("...same of body's background image") no-repeat center fixed (same shorthand parameter, if any);
background-size: cover;} 

3）这样，您将拥有一个背景图像，该图像将产生假的"透明标题"效果，并且您将解决滚动内容出现在透明标头后面的内容的问题。

我希望您会发现这有用，我要感谢给我提示的人;）

Answer 2

您可以将滚动内容放入元素 <div class="content">...</div>中，并将其样式隐藏掉：

.content {
  overflow: hidden; /* or "auto" or "scroll" */
}

这样，内容元素之外的所有内容都将被隐藏。

如果这对您有帮助，很好:)如果不是，如果您愿意发布一个示例页面。