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

-1

我制作了一个标题，由带有徽标和社交链接的顶部透明部分以及从顶部填充的导航栏组成。 this is the transparent header that i've made。在导航栏上，我有一些锚点，它工作得很好（我已经添加了引导程序中所需的填充，然后它工作正常）。问题在于，当我滚动页面时，内容会出现在我的标题后面。 look here what is happening now。这不是我想要的。我已经阅读了大量关于类似情况的文章，但是我还没有找到解决方案。是否有JavaScript解决方法或技术来隐藏内容div时，他们通过导航栏？我怎样才能做到这一点？我真的很想保存透明的顶部标题！非常感谢和问候！如何通过css，js或jquery隐藏透明标头后面的内容？

来源

2016-11-26 Federico Angeloni

你忘了添加的图片？ –

对不起，我已经添加了...这是我的第一个问题抱歉！ ;） –

你希望它是透明的，直到有人滚动页面？那么你想要发生什么？ – ppovoski

你可以把你的滚动内容为元素<div class="content">...</div>和风格它溢出隐藏：

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

这样一切内容元素之外将被隐藏。

如果这对你有帮助，那么很好:) 如果不是，我可以帮你更好，如果你会张贴示例页面。

来源

2016-11-26 22:58:43 FirePanther

谢谢@FirePanther我试过你的解决方案，我已经在一个div中创建了我的滚动内容，并更新了css，但它似乎不起作用。内容再次位于透明标题后面！ –

你可能会发布网址到您的网页或导出不工作的部分？所以我可以将溢出部分整合进去。div应该放在logo下面，如果你的logo位置是绝对位置或者固定位置，而content div位于它下面，你就需要'margin-top：{logoheight} px;'或者类似的东西 – FirePanther

标题由带有徽标和社交按钮+导航栏的顶部标题组成。所有标题都是固定的。我已经添加了保证金顶部，这已经解决了我的内容的“起点”。问题是当我滚动页面。另外添加“overflow：hidden”它会继续出现在标题后面，并且由于它是透明的，因此会显示。我已经解决了添加与背景相同图像的问题（请参阅下面的解决方案）！有了这个技巧，我已经取得了相同的结果，现在当我滚动页面时，内容隐藏在图像后面！ ;）非常感谢！ –

我发现没有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）通过这种方式，您将获得一个背景图像，它会产生虚假的“透明标题”效果，并且您将解决滚动显示在透明标题后面的内容的问题。

我希望，你会发现这很有用，我想感谢那些给了我提示的家伙;）

来源

2016-11-27 00:08:01

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

回答

相关问题