Question

我制作了一个由顶部透明部分组成的标题，其中包含徽标和社交链接以及一个从顶部有填充的导航栏。 this is the transparent header that i've made。在导航栏上我有一些锚点它运行良好（我已经在bootstrap中添加了填充，然后它工作正常）。问题是当我滚动页面时，内容会在我的标题后面。 look here what is happening now。这不是我想要的。我已经阅读了大量关于类似情况的帖子，但我找不到解决方案。当它们通过导航栏时，是否有一个javascript解决方法或tecnique来隐藏内容div？我怎样才能实现这一目标？我真的很想保存透明的顶部标题！非常感谢和问候！

Answer 1

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

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

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

如果这对你有帮助，那很好:) 如果不是，如果您要发布示例页面，我可能会帮助您更好。

Answer 2

我找到了没有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）通过这种方式，您将拥有一个背景图像，可以制作一个假的透明标题＆＃34;效果，您将解决滚动透明标题后面的内容的问题。

我希望你能发现这个有用，我要感谢那些给我提示的人;）

如何通过css，js或jquery隐藏透明头后面的内容？

2 个答案: